/* ========================================================================== INSÔNIA WORLDWIDE — Design tokens + base styles Style: Swiss Modernism 2.0 (editorial grid) with a nocturnal dark shell. Typefaces: Work Sans (display/body), Roboto Mono (meta/labels) — brand kit fonts. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap'); :root { /* ---- Brand colors (sampled from brand kit) ---- */ --color-ink: #0a0a0a; --color-ink-soft: #161616; --color-charcoal: #4c4c4c; --color-charcoal-deep: #262626; --color-paper: #faf9f6; --color-paper-pure: #ffffff; --color-accent: #fef367; --color-accent-ink: #0a0a0a; --color-muted: #6f6f6f; --color-muted-on-dark: #a3a3a3; --color-border: #e2e0da; --color-border-on-dark: rgba(250, 249, 246, 0.16); --color-danger: #e0332f; --color-success: #2f8a4b; /* ---- Semantic tokens ---- */ --color-bg: var(--color-paper); --color-bg-shell: var(--color-ink); --color-fg: var(--color-ink); --color-fg-on-dark: var(--color-paper); /* ---- Typography ---- */ --font-display: 'Work Sans', system-ui, sans-serif; --font-body: 'Work Sans', system-ui, sans-serif; --font-mono: 'Roboto Mono', ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); --text-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); --text-4xl: clamp(3rem, 2rem + 4.5vw, 5.5rem); --text-5xl: clamp(3.5rem, 2rem + 7vw, 8rem); --leading-tight: 1.05; --leading-snug: 1.25; --leading-normal: 1.6; /* ---- Spacing (8px rhythm) ---- */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; --space-8: 8rem; /* ---- Layout ---- */ --container-max: 1360px; --container-pad: clamp(1.25rem, 3vw, 3rem); --header-h: 76px; /* ---- Radius / motion ---- */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 22px; --radius-block: 30%; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 500ms; --z-header: 100; --z-loader: 1000; --z-menu: 200; } /* Dark mode — only the "paper" content surfaces flip; the header/footer/hero shell is dark in both themes by brand design (see .on-dark). Toggled via [data-theme] on , set by an inline head script (avoids flash of the wrong theme) and assets/js/theme.js (the switch + persistence). */ :root[data-theme="dark"] { --color-bg: #121212; --color-fg: #f2f1ee; --color-paper-pure: #1c1c1c; --color-border: rgba(255, 255, 255, 0.14); --color-muted: #9c9c9c; } /* ---------------------------------------------------------------------- */ /* Reset */ /* ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; min-height: 100dvh; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } svg { display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, p, figure { margin: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: var(--leading-tight); letter-spacing: -0.01em; } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-2); top: -60px; background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; z-index: 1200; transition: top var(--dur-base) var(--ease-out); } .skip-link:focus { top: var(--space-2); } /* ---------------------------------------------------------------------- */ /* Layout helpers */ /* ---------------------------------------------------------------------- */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--space-7); } .section--tight { padding-block: var(--space-5); } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-3); } .on-dark { background: var(--color-bg-shell); color: var(--color-fg-on-dark); } .on-dark .muted { color: var(--color-muted-on-dark); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); } .on-dark .eyebrow { color: var(--color-accent); } .eyebrow::before { content: ''; width: 7px; height: 7px; background: currentColor; border-radius: var(--radius-block); flex: none; } .muted { color: var(--color-muted); } /* ---------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 48px; padding: 0.85em 1.6em; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; border: 1.5px solid currentColor; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); cursor: pointer; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); } .btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); } .on-dark .btn--primary:hover { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); } .btn--ghost { background: transparent; border-color: currentColor; color: currentColor; } .btn--ghost:hover { background: var(--color-fg); color: var(--color-bg); } .on-dark .btn--ghost:hover { background: var(--color-fg-on-dark); color: var(--color-bg-shell); } .btn--sm { min-height: 40px; padding: 0.6em 1.2em; font-size: var(--text-xs); } /* ---------------------------------------------------------------------- */ /* Header / Nav */ /* ---------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-ink); color: var(--color-paper); border-bottom: 1px solid var(--color-border-on-dark); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .brand { display: flex; align-items: center; gap: 0.65em; font-family: var(--font-mono); } .brand__mark { display: flex; } .brand__mark img { width: 30px; height: 30px; } .brand__text { display: flex; flex-direction: column; gap: 0.15em; } .brand__name { font-weight: 700; font-size: var(--text-base); letter-spacing: 0.02em; } .brand-lang { font-size: 0.6em; letter-spacing: 0.1em; color: var(--color-muted-on-dark); } .brand-lang button { color: inherit; font-weight: 400; transition: color var(--dur-fast) var(--ease-out); } .brand-lang button:hover { color: var(--color-paper); } .brand-lang button[aria-pressed="true"] { color: var(--color-accent); font-weight: 700; } .nav-primary { display: flex; align-items: center; gap: var(--space-4); } .nav-primary__links { display: flex; align-items: center; gap: var(--space-3); } .nav-primary a { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.4em 0.1em; position: relative; } .nav-primary a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--color-accent); transition: right var(--dur-base) var(--ease-out); } .nav-primary a:hover::after, .nav-primary a[aria-current="page"]::after { right: 0; } .nav-primary a[aria-current="page"] { color: var(--color-accent); } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border-radius: var(--radius-sm); } .nav-toggle__bar { display: block; width: 20px; height: 2px; background: currentColor; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .nav-primary__links { position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu); background: var(--color-ink); flex-direction: column; align-items: flex-start; padding: var(--space-4) var(--container-pad); gap: var(--space-3); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); } .nav-primary__links a { font-size: var(--text-xl); } body.menu-open .nav-primary__links { transform: translateX(0); } body.menu-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .nav-toggle__bar:nth-child(2) { opacity: 0; } body.menu-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ---------------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------------- */ .site-footer { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-6) var(--space-4); } .footer-grid { display: grid; gap: var(--space-5); grid-template-columns: 1.4fr repeat(3, 1fr); } .footer-brand img { width: 48px; height: 48px; margin-bottom: var(--space-2); } .footer-tagline { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted-on-dark); max-width: 32ch; } .footer-col h4 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted-on-dark); font-weight: 700; margin-bottom: var(--space-2); } .footer-col ul { display: flex; flex-direction: column; gap: 0.65em; } .footer-col a:hover { color: var(--color-accent); } .footer-bottom { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--color-border-on-dark); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted-on-dark); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------------- */ /* Newsletter block */ /* ---------------------------------------------------------------------- */ .newsletter { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-5); align-items: center; background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-lg); padding: var(--space-5); } .newsletter form { display: flex; gap: var(--space-1); flex-wrap: wrap; } .newsletter input[type="email"] { flex: 1 1 220px; min-height: 48px; background: transparent; border: 1.5px solid var(--color-border-on-dark); border-radius: 999px; padding: 0 1.2em; color: var(--color-paper); font-family: var(--font-mono); font-size: var(--text-sm); } .newsletter input[type="email"]::placeholder { color: var(--color-muted-on-dark); } .newsletter input[type="email"]:focus { border-color: var(--color-accent); } @media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------------- */ /* Cards */ /* ---------------------------------------------------------------------- */ .card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper-pure); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } a.card:hover, .card.is-hoverable:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(10,10,10,0.35); } .card__media { aspect-ratio: 4/3; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card__body { padding: var(--space-3); } .card__meta { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); display: flex; gap: var(--space-2); margin-bottom: 0.6em; } .card__title { font-size: var(--text-lg); margin-bottom: 0.4em; } .card__dek { color: var(--color-muted); font-size: var(--text-sm); } /* Generative cover pattern used for placeholder editorial imagery */ .cover-pattern { position: absolute; inset: 0; background-color: var(--cover-bg, var(--color-ink)); background-image: radial-gradient(circle at 18% 24%, var(--cover-dot, rgba(254,243,103,0.9)) 0 9px, transparent 9.5px), radial-gradient(circle at 78% 62%, var(--cover-dot, rgba(254,243,103,0.55)) 0 14px, transparent 14.5px), radial-gradient(circle at 52% 88%, var(--cover-dot, rgba(250,249,246,0.35)) 0 6px, transparent 6.5px); } .cover-pattern::after { content: attr(data-glyph); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: rgba(250,249,246,0.92); font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.02em; text-align: center; padding: 0.5em; } /* ---------------------------------------------------------------------- */ /* Forms */ /* ---------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: var(--space-3); } .field label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .field input, .field textarea { min-height: 52px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.9em 1em; background: var(--color-paper-pure); font-size: var(--text-base); } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--color-fg); } .field-hint { font-size: var(--text-xs); color: var(--color-muted); } .field-error { font-size: var(--text-xs); color: var(--color-danger); display: none; } .field.has-error input, .field.has-error textarea { border-color: var(--color-danger); } .field.has-error .field-error { display: block; } .form-status { margin-top: var(--space-2); padding: 0.9em 1.1em; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-sm); display: none; } .form-status.is-visible { display: block; } .form-status.is-success { background: rgba(47,138,75,0.12); color: #1f6b39; } .form-status.is-error { background: rgba(224,51,47,0.12); color: var(--color-danger); } /* ---------------------------------------------------------------------- */ /* Utility */ /* ---------------------------------------------------------------------- */ .stack { display: flex; flex-direction: column; } .cluster { display: flex; align-items: center; flex-wrap: wrap; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } [data-i18n-hidden] { display: none !important; } .reveal { opacity: 0; transform: translateY(14px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ========================================================================== Pixel-grid loader Full-bleed CSS grid of solid tiles covering the page; each tile fades out on its own randomized delay to reveal the page underneath, with a center 2x2 cluster showing quadrants of the Insônia mark (background-size: 200% trick — one image reassembled across 4 adjacent cells). ========================================================================== */ #pixel-loader { position: fixed; inset: 0; z-index: var(--z-loader); /* No background of its own — every cell in the grid carries its own black fill, and the parent must stay transparent or fading the cells out would just reveal this container's background instead of the page. */ } #pixel-loader[hidden] { visibility: hidden; pointer-events: none; } #pixel-loader-grid { position: absolute; inset: 0; display: grid; } .loader-cell { background-color: var(--color-ink); background-repeat: no-repeat; opacity: 1; transition: opacity 420ms ease-out; } #pixel-loader-grid.is-clearing .loader-cell { opacity: 0; } @media (prefers-reduced-motion: reduce) { #pixel-loader { display: none !important; } } /* ========================================================================== Hero (Home) ========================================================================== */ .hero { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-6) var(--space-7); position: relative; overflow: hidden; } .hero__grain { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; background-image: radial-gradient(rgba(250,249,246,0.08) 1px, transparent 1px); background-size: 3px 3px; } .hero__inner { position: relative; } .hero__eyebrow { margin-bottom: var(--space-3); } .hero__title { font-size: var(--text-5xl); text-transform: uppercase; max-width: 16ch; margin-bottom: var(--space-3); } .hero__title .accent { color: var(--color-accent); } .hero__dek { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--color-muted-on-dark); max-width: 46ch; margin-bottom: var(--space-4); line-height: var(--leading-snug); } .hero__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .terminal-line { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); letter-spacing: 0.01em; margin-bottom: var(--space-4); min-height: 1.4em; } /* Solid block cursor for the decode-text effect (assets/js/decode-text.js) — trails the resolving edge while text is still scrambling, then is removed. Uses currentColor so it matches whatever element it's placed in. */ .decode-cursor { display: inline-block; width: 0.5em; height: 0.9em; background: currentColor; margin-left: 0.04em; vertical-align: text-bottom; animation: decodeCursorBlink 0.85s steps(1) infinite; } @keyframes decodeCursorBlink { 50% { opacity: 0.2; } } @media (prefers-reduced-motion: reduce) { .decode-cursor { display: none; } } .hero__marks { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-on-dark); } .hero__marks span { color: var(--color-paper); } /* ========================================================================== Section headers ========================================================================== */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } .section-head h2 { font-size: var(--text-3xl); text-transform: uppercase; } .section-head .eyebrow { margin-bottom: 0.6em; } /* ========================================================================== Journal / News ========================================================================== */ .journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .journal-grid .card:first-child { grid-column: span 2; } .journal-grid .card:first-child .card__media { aspect-ratio: 16/9; } @media (max-width: 960px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } .journal-grid .card:first-child { grid-column: span 2; } } @media (max-width: 640px) { .journal-grid { grid-template-columns: 1fr; } .journal-grid .card:first-child { grid-column: span 1; } } .filter-bar { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-4); } .filter-chip { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.55em 1.1em; border-radius: 999px; border: 1.5px solid var(--color-border); color: var(--color-muted); transition: all var(--dur-fast) var(--ease-out); } .filter-chip:hover { border-color: var(--color-ink); color: var(--color-ink); } .filter-chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); } /* Article page */ .article-head { max-width: 74ch; margin-inline: auto; text-align: center; padding-block: var(--space-6) var(--space-4); } .article-head h1 { font-size: var(--text-4xl); text-transform: uppercase; margin-block: var(--space-2); } .article-cover { max-width: 1100px; margin-inline: auto; aspect-ratio: 16/8; border-radius: var(--radius-lg); overflow: hidden; position: relative; margin-bottom: var(--space-6); } .article-body { max-width: 68ch; margin-inline: auto; font-size: var(--text-lg); line-height: var(--leading-normal); } .article-body p { margin-bottom: var(--space-3); } .article-body h2 { font-size: var(--text-2xl); text-transform: uppercase; margin-block: var(--space-5) var(--space-2); } .article-foot { max-width: 68ch; margin: var(--space-6) auto 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } /* ========================================================================== Metered reading gate (assets/js/paywall.js) ========================================================================== */ /* Excerpt fades out where the text is cut off. */ .article-body.is-truncated { -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent); mask-image: linear-gradient(to bottom, black 55%, transparent); } .paywall { max-width: 68ch; margin: var(--space-4) auto 0; padding: var(--space-5) var(--space-4); background: var(--color-ink); color: var(--color-paper); border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-lg); text-align: center; } .paywall__eyebrow { margin-bottom: 0.8em; } .paywall__title { font-size: var(--text-2xl); text-transform: uppercase; line-height: var(--leading-tight); margin-bottom: 0.4em; } .paywall__dek { font-family: var(--font-mono); font-size: var(--text-base); color: var(--color-muted-on-dark); line-height: var(--leading-snug); max-width: 46ch; margin: 0 auto var(--space-4); } .paywall__form { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; } .paywall__form input[type="email"] { flex: 1 1 220px; max-width: 320px; min-height: 54px; background: rgba(255, 255, 255, 0.04); border: 1.5px solid var(--color-border-on-dark); border-radius: 999px; padding: 0 1.3em; color: var(--color-paper); font-family: var(--font-mono); font-size: var(--text-base); } .paywall__form input[type="email"]::placeholder { color: var(--color-muted-on-dark); } .paywall__form input[type="email"]:focus { border-color: var(--color-accent); } .paywall__form .btn { min-height: 54px; } .paywall__form .form-status { flex: 1 1 100%; } /* ========================================================================== Merch ========================================================================== */ .merch-banner { background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; } .merch-banner p { font-family: var(--font-mono); font-weight: 700; } .merch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } @media (max-width: 960px) { .merch-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .merch-grid { grid-template-columns: 1fr; } } .merch-card__media { aspect-ratio: 1/1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-charcoal-deep); } .merch-card__tag { position: absolute; top: var(--space-1); left: var(--space-1); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.35em 0.8em; border-radius: 999px; z-index: 1; } .merch-card__price { font-family: var(--font-mono); color: var(--color-muted); margin-top: 0.3em; } /* ========================================================================== Contact ========================================================================== */ .contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-6); align-items: start; } .contact-info h2 { font-size: var(--text-3xl); text-transform: uppercase; margin-bottom: var(--space-3); } .contact-channel { display: flex; gap: var(--space-2); padding-block: var(--space-2); border-top: 1px solid var(--color-border); } .contact-channel:last-child { border-bottom: 1px solid var(--color-border); } .contact-channel dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); width: 9ch; flex: none; } @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } } /* ========================================================================== About strip (used on home + footer manifesto line) ========================================================================== */ .marquee { overflow: hidden; border-block: 1px solid var(--color-border-on-dark); background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-2); } .marquee__track { display: flex; gap: var(--space-5); white-space: nowrap; width: max-content; font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; animation: marquee 26s linear infinite; } /* Class rather than a bare `span` selector — every word in the track is wrapped in a span so it can be translated, and only these are accented. */ .marquee__track .marquee__hi { color: var(--color-accent); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ========================================================================== Subscribe popup (homepage only) ========================================================================== */ #subscribe-popup { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--space-3); } #subscribe-popup[hidden] { display: none; } .subscribe-popup__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.65); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .subscribe-popup__card { position: relative; overflow: hidden; width: 100%; max-width: 560px; background: var(--color-ink); color: var(--color-paper); /* Hairline edge — in dark mode the card and the page are both near-black, so the shadow alone leaves the card with no readable boundary. */ border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5) var(--space-5); box-shadow: 0 32px 80px -20px rgba(0,0,0,0.65); transform: translateY(24px) scale(0.98); opacity: 0; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); } /* Decorative dot-pattern backdrop, brand texture behind the copy — the kind of visual weight a clothing-brand popup usually carries. */ .subscribe-popup__card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(254,243,103,0.5) 0 5px, transparent 5.5px); background-size: 34px 34px; background-position: -10px -10px; -webkit-mask-image: linear-gradient(200deg, black, transparent 60%); mask-image: linear-gradient(200deg, black, transparent 60%); opacity: 0.35; pointer-events: none; } #subscribe-popup.is-visible .subscribe-popup__backdrop { opacity: 1; } #subscribe-popup.is-visible .subscribe-popup__card { transform: translateY(0) scale(1); opacity: 1; } .subscribe-popup__close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--color-muted-on-dark); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .subscribe-popup__close:hover { color: var(--color-paper); background: rgba(255,255,255,0.08); } .subscribe-popup__close svg { width: 18px; height: 18px; } .subscribe-popup__mark { position: relative; width: 36px; height: 36px; margin-bottom: var(--space-3); } .subscribe-popup__eyebrow { position: relative; margin-bottom: 0.8em; } .subscribe-popup__title { position: relative; font-size: var(--text-3xl); text-transform: uppercase; margin-bottom: 0.4em; max-width: 16ch; line-height: var(--leading-tight); } .subscribe-popup__dek { position: relative; font-family: var(--font-mono); font-size: var(--text-base); color: var(--color-muted-on-dark); margin-bottom: var(--space-4); max-width: 40ch; line-height: var(--leading-snug); } .subscribe-popup__form { position: relative; display: flex; gap: var(--space-2); flex-wrap: wrap; } .subscribe-popup__form input[type="email"] { flex: 1 1 220px; min-height: 54px; background: rgba(255,255,255,0.04); border: 1.5px solid var(--color-border-on-dark); border-radius: 999px; padding: 0 1.3em; color: var(--color-paper); font-family: var(--font-mono); font-size: var(--text-base); } .subscribe-popup__form input[type="email"]::placeholder { color: var(--color-muted-on-dark); } .subscribe-popup__form input[type="email"]:focus { border-color: var(--color-accent); } .subscribe-popup__form .btn { min-height: 54px; } @media (max-width: 620px) { .subscribe-popup__card { max-width: 100%; padding: var(--space-5) var(--space-3) var(--space-4); } .subscribe-popup__title { font-size: var(--text-2xl); } } @media (prefers-reduced-motion: reduce) { .subscribe-popup__backdrop, .subscribe-popup__card { transition: none; } } /* ========================================================================== Theme switch — literal on/off light-switch toggle, sits next to the mobile hamburger button (assets/js/theme.js drives the state). ========================================================================== */ /* A wall switch reduced to its Insônia form: a flat hairline plate and a lever that throws up for lights-on (light theme) and down for lights-off (dark theme). No chrome, no bevels — brand tokens only. aria-pressed="true" means dark mode, i.e. the lever sits DOWN. */ .theme-switch { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; background: none; cursor: pointer; } /* Outer faceplate — plate proportions plus a screw at top and bottom, which is what actually reads as "wall switch" at this size. */ .theme-switch__plate { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 23px; height: 35px; padding: 2.5px 0; border: 1.5px solid var(--color-border-on-dark); border-radius: 3px; background: rgba(250, 249, 246, 0.05); transition: border-color var(--dur-fast) var(--ease-out); } .theme-switch__screw { flex: none; width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--color-muted-on-dark); opacity: 0.7; } /* The recessed opening the lever throws inside. */ .theme-switch__well { position: relative; flex: none; width: 12px; height: 20px; border: 1px solid var(--color-border-on-dark); border-radius: 2px; background: rgba(10, 10, 10, 0.55); } .theme-switch__lever { position: absolute; left: 1.5px; right: 1.5px; top: 1.5px; height: 8px; border-radius: 1px; background: var(--color-accent); transition: top var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } /* Lights off — lever thrown down, accent drains out of it. */ .theme-switch[aria-pressed="true"] .theme-switch__lever { top: calc(100% - 9.5px); background: var(--color-charcoal); } .theme-switch:hover .theme-switch__plate { border-color: var(--color-muted-on-dark); } .theme-switch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .theme-switch__lever { transition: none; } }