/* ============================================================ Cassileth Studio — single stylesheet Cream palette (logo-derived) · used by every page ============================================================ */ /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- Design tokens --- */ :root { /* Surfaces */ --bg: #F2EBD8; --surface: #ECE5CC; --card: #FBF7E9; --card-hover: #FFFCEF; --border: rgba(45, 60, 52, 0.10); --border-2: rgba(45, 60, 52, 0.05); /* Text */ --text: #1F2B26; --text-2: #5C6A60; --text-3: #98998C; /* App brand colors — for fills, dots, glows */ --listbox: #2EB872; --tempo: #D13F92; /* Darker variants for text on cream (contrast-safe) */ --listbox-text: #096B3A; --tempo-text: #841A56; /* Accent — defaults when no data-app is set (Tonic / homepage chrome) */ --accent: var(--text-2); --accent-text: var(--text-2); --accent-dim: rgba(45, 60, 52, 0.06); --accent-border: rgba(45, 60, 52, 0.12); } /* Per-app theming — sets --accent-* family. Targets both (app pages) and .app-card[data-app="..."] (homepage cards). */ body[data-app="listbox"], .app-card[data-app="listbox"] { --accent: var(--listbox); --accent-text: var(--listbox-text); --accent-dim: rgba(46, 184, 114, 0.12); --accent-border: rgba(46, 184, 114, 0.38); } body[data-app="tempo"], .app-card[data-app="tempo"] { --accent: var(--tempo); --accent-text: var(--tempo-text); --accent-dim: rgba(209, 63, 146, 0.10); --accent-border: rgba(209, 63, 146, 0.34); } /* --- Base --- */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; animation: pageFade 0.6s ease; } @keyframes pageFade { from { opacity: 0; } to { opacity: 1; } } /* --- Paper grain texture (subtle) --- */ body::before { content: ''; position: fixed; inset: -50%; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: multiply; pointer-events: none; z-index: 9999; animation: grain 8s steps(10) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-2%, -3%); } 20% { transform: translate(3%, 1%); } 30% { transform: translate(-1%, 4%); } 40% { transform: translate(4%, -2%); } 50% { transform: translate(-3%, 2%); } 60% { transform: translate(2%, -4%); } 70% { transform: translate(-4%, 1%); } 80% { transform: translate(1%, 3%); } 90% { transform: translate(3%, -1%); } } /* --- Ambient bg glow (subtle, accent-tinted) --- */ .bg-glow { position: fixed; top: -10vh; left: 50%; transform: translateX(-50%); width: 60vw; height: 50vh; background: radial-gradient( ellipse at center, var(--accent-dim) 0%, transparent 70% ); pointer-events: none; z-index: 0; opacity: 0.7; } /* --- Layout wrapper --- */ .wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 2.5rem; } body[data-app] .wrap { max-width: 960px; } /* --- Header --- */ header { padding: 1.8rem 0; border-bottom: 1px solid var(--border-2); position: relative; z-index: 2; } header .wrap { display: flex; align-items: center; justify-content: space-between; } .wordmark { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.05rem; letter-spacing: 0.025em; color: var(--text); text-decoration: none; display: flex; align-items: center; } .wordmark-logo { height: 28px; width: auto; display: block; flex-shrink: 0; margin-right: 0.7rem; } .wordmark-studio { color: var(--text-3); font-weight: 300; } .header-tagline { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); } .back-link { display: flex; align-items: center; gap: 0.55rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); text-decoration: none; transition: color 0.2s; } .back-link:hover { color: var(--text-2); } .back-link svg { transition: transform 0.2s; } .back-link:hover svg { transform: translateX(-3px); } /* --- Section label --- */ .section-label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2rem; } body:not([data-app]) .section-label { padding-top: 1rem; border-top: 1px solid var(--border-2); } /* --- Rule --- */ .rule { height: 1px; background: var(--border-2); margin: 1rem 0; } /* --- Shared animations --- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* --- Badge (shared between homepage cards & app page heroes) --- */ .badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.28rem 0.72rem; border-radius: 999px; width: fit-content; background: var(--accent-dim); color: var(--accent-text); border: 1px solid var(--accent-border); } .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: blink 2.5s ease infinite; } /* ============================================================ HOMEPAGE — hero (Scoped via body:not([data-app]) since homepage has no data-app) ============================================================ */ body:not([data-app]) .hero { padding: 2rem 0 5rem; opacity: 0; animation: fadeUp 1s ease forwards 0.15s; } body:not([data-app]) .hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2.5rem; display: flex; align-items: center; gap: 1rem; } body:not([data-app]) .hero-eyebrow::after { content: ''; display: block; height: 1px; width: 40px; background: var(--text-3); opacity: 0.4; } body:not([data-app]) .hero h1 { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(2.8rem, 6.5vw, 6rem); line-height: 1.04; letter-spacing: -0.025em; max-width: 680px; } body:not([data-app]) .hero h1 em { font-style: italic; color: var(--text-2); } body:not([data-app]) .hero-body { margin-top: 2.2rem; font-size: 1rem; color: var(--text-2); max-width: 420px; line-height: 1.7; } /* ============================================================ HOMEPAGE — apps grid + cards ============================================================ */ .apps { padding-bottom: 8rem; } .apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .app-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; position: relative; overflow: hidden; cursor: default; text-decoration: none; color: inherit; opacity: 0; animation: fadeUp 0.8s ease forwards; transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s ease; } .app-card:nth-child(1) { animation-delay: 0.5s; } .app-card:nth-child(2) { animation-delay: 0.65s; } .app-card:nth-child(3) { animation-delay: 0.8s; } .app-card:hover { background: var(--card-hover); border-color: var(--accent-border); transform: translateY(-5px); } a.app-card { cursor: pointer; } /* Hover glow blob */ .app-card::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 200px; height: 200px; border-radius: 50%; background: var(--accent); opacity: 0; filter: blur(50px); transition: opacity 0.4s ease; pointer-events: none; } .app-card:hover::after { opacity: 0.3; } /* App icon */ .app-icon { width: 66px; height: 66px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; transition: transform 0.3s ease; } .app-icon img { width: 100%; height: 100%; display: block; border-radius: 16px; } .app-card:hover .app-icon { transform: scale(1.04); } /* Tonic / no-brand cards: neutral icon background */ .app-card:not([data-app]) .app-icon { background: var(--surface); border: 1px solid var(--border); } /* Card text */ .app-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 0.22rem; } .app-category { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; color: var(--accent-text); } .app-desc { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; flex: 1; } .card-rule { height: 1px; background: var(--border-2); } .app-platform { display: flex; align-items: center; gap: 0.5rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .apple-icon { opacity: 0.55; flex-shrink: 0; color: var(--text); } /* ============================================================ APP PAGES — hero (Scoped via body[data-app] since app pages set data-app) ============================================================ */ body[data-app] .hero { padding: 2rem 0 1rem; } body[data-app] .hero-top { display: flex; align-items: flex-start; gap: 2.2rem; margin-bottom: 2.5rem; } body[data-app] .app-icon-lg { width: 88px; height: 88px; flex-shrink: 0; } body[data-app] .hero-meta { padding-top: 0.4rem; } body[data-app] .hero-status { margin-bottom: 2rem; } body[data-app] .hero-category { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.3rem; } body[data-app] .hero h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; } body[data-app] .hero h1 span { color: var(--text-2); font-weight: 300; font-style: italic; } body[data-app] .hero-body { font-size: 1.05rem; color: var(--text-2); max-width: 580px; line-height: 1.75; } /* ============================================================ APP PAGES — features grid ============================================================ */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--border); } .feature { background: var(--card); padding: 1.75rem 1.6rem; transition: background 0.25s; } .feature:hover { background: var(--card-hover); } .feature-icon { font-size: 1.4rem; margin-bottom: 1rem; line-height: 1; } .feature h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; } .feature p { font-size: 0.845rem; color: var(--text-2); line-height: 1.65; } /* ============================================================ APP PAGES — steps ============================================================ */ .steps { display: flex; flex-direction: column; } .step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; align-items: flex-start; padding: 1.5rem 0; border-bottom: 1px solid var(--border-2); } .step:last-child { border-bottom: none; } .step-num { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.6rem; color: var(--accent); opacity: 0.55; line-height: 1.2; padding-top: 0.1rem; } .step-body h4 { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 0.95rem; margin-bottom: 0.25rem; } .step-body p { font-size: 0.85rem; color: var(--text-2); line-height: 1.65; } /* ============================================================ APP PAGES — links section ============================================================ */ .links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .link-card { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.6rem; text-decoration: none; color: var(--text); transition: background 0.25s, border-color 0.25s, transform 0.25s; } .link-card:hover { background: var(--card-hover); border-color: var(--accent-border); transform: translateY(-3px); } .link-card-left { display: flex; flex-direction: column; gap: 0.25rem; } .link-label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3); } .link-title { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 400; } .link-arrow { color: var(--text-3); transition: color 0.2s, transform 0.2s; flex-shrink: 0; } .link-card:hover .link-arrow { color: var(--accent-text); transform: translate(3px, -3px); } /* ============================================================ FOOTER ============================================================ */ footer { border-top: 1px solid var(--border-2); position: relative; z-index: 1; } body[data-app] footer { margin-top: 6rem; } footer .wrap { padding-top: 1.8rem; padding-bottom: 1.8rem; display: flex; align-items: center; justify-content: space-between; } .footer-copy { font-size: 0.78rem; color: var(--text-3); display: flex; gap: 2rem; align-items: center; } .footer-link { color: var(--text-3); text-decoration: none; transition: color 0.2s; } .footer-link:hover { color: var(--text-2); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 860px) { .apps-grid { grid-template-columns: 1fr 1fr; } .app-card:nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 720px) { .features { grid-template-columns: 1fr; border-radius: 14px; } .links-grid { grid-template-columns: 1fr; } body[data-app] .hero-top { gap: 1.5rem; } body[data-app] .app-icon-lg { width: 72px; height: 72px; border-radius: 16px; } } @media (max-width: 580px) { .wrap { padding: 0 1.25rem; } .apps-grid { grid-template-columns: 1fr; } .app-card:nth-child(3) { grid-column: auto; } body:not([data-app]) .hero h1 { font-size: 2.6rem; } .header-tagline { display: none; } .wordmark-logo { height: 24px; } footer .wrap { flex-direction: column; gap: 0.5rem; align-items: flex-start; } } @media (max-width: 520px) { body[data-app] .hero h1 { font-size: 1.9rem; } }