/* Closed Gallery — dark, minimal, mystical Three themes via [data-theme] on : - chernyy: pure black + cool moonlight - graphite: cool graphite, faint blue - alchemy: warm black + dim gold accent */ :root { --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-body: "Geist", "Inter", system-ui, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; --bg: #050505; --bg-2: #0b0b0c; --ink: #e9e6df; --ink-2: #b9b4a8; --ink-3: #6a665d; --ink-4: #3a3833; --hair: rgba(220, 210, 190, 0.10); --hair-strong: rgba(220, 210, 190, 0.22); --accent: #d8c9a0; /* warm bone / parchment */ --accent-soft: rgba(216, 201, 160, 0.14); --glow: rgba(232, 222, 195, 0.45); --frame: rgba(255, 250, 235, 0.18); --radius: 0; --serif-tracking: 0.01em; --eyebrow-tracking: 0.32em; } [data-theme="graphite"] { --bg: #0a0d10; --bg-2: #10141a; --ink: #e6ebf0; --ink-2: #a9b4be; --ink-3: #5e6873; --ink-4: #2c333b; --hair: rgba(200, 215, 230, 0.10); --hair-strong: rgba(200, 215, 230, 0.22); --accent: #c9d7e6; --accent-soft: rgba(201, 215, 230, 0.12); --glow: rgba(180, 210, 240, 0.40); --frame: rgba(220, 235, 250, 0.18); } [data-theme="alchemy"] { --bg: #08060a; --bg-2: #0e0a10; --ink: #ece2ce; --ink-2: #b8a98c; --ink-3: #6c5f48; --ink-4: #3a3225; --hair: rgba(220, 190, 130, 0.12); --hair-strong: rgba(220, 190, 130, 0.26); --accent: #c9a96a; /* dim gold */ --accent-soft: rgba(201, 169, 106, 0.14); --glow: rgba(220, 180, 110, 0.5); --frame: rgba(220, 180, 110, 0.22); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100%; overflow-x: hidden; } body { /* faint vignette / moonlight from above */ background: radial-gradient(ellipse 1200px 700px at 50% -10%, rgba(255, 250, 230, 0.05), transparent 60%), radial-gradient(ellipse 900px 600px at 50% 110%, rgba(120, 130, 160, 0.04), transparent 60%), var(--bg); } /* Optional film grain — toggled via [data-decor=on] */ body[data-decor="on"]::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } ::selection { background: var(--accent-soft); color: var(--ink); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } .eyebrow { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--ink-3); font-weight: 500; } .serif { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--serif-tracking); font-style: normal; } .mono { font-family: var(--font-mono); } /* ================== APP CHROME ================== */ .app { min-height: 100vh; position: relative; } .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 22px 36px; pointer-events: none; } .topbar > * { pointer-events: auto; } .brand { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em; } .brand .glyph { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--frame); transform: rotate(45deg); margin-right: 4px; position: relative; top: -1px; } .brand small { font-family: var(--font-body); font-size: 10px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--ink-3); } .topnav { display: flex; gap: 28px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); } .topnav button { transition: color 200ms ease; } .topnav button:hover { color: var(--ink); } .topnav button.active { color: var(--accent); } /* ================== HOME / HERO ================== */ .home { min-height: 100vh; display: flex; flex-direction: column; position: relative; } .hero { flex: 0 0 auto; padding: 140px 36px 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .hero .meta { margin-bottom: 36px; display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; } .hero .meta .dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent); } .hero h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 7.5vw, 116px); line-height: 0.96; letter-spacing: -0.015em; margin: 0 0 18px; max-width: 14ch; color: var(--ink); } .hero h1 em { font-style: italic; color: var(--accent); font-weight: 300; } .hero .sub { font-family: var(--font-body); font-size: clamp(14px, 1.4vw, 18px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; } .hero-divider { width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, var(--hair-strong), transparent); margin: 64px auto 0; } .hero-hint { font-size: 10px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--ink-3); margin-top: 20px; display: flex; align-items: center; gap: 10px; justify-content: center; } /* ================== CAROUSEL (Hero-Selection) ================== */ .gallery { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; position: relative; padding: 60px 0 30px; perspective: 2000px; } .gallery-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; font-size: 10px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--ink-3); } .gallery-eyebrow .line { width: 80px; height: 1px; background: var(--hair-strong); } .carousel-stage { position: relative; width: 100%; height: 600px; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: pan-y; } .carousel-track { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* card slot — absolutely positioned, transformed by JS-driven CSS vars */ .slot { position: absolute; top: 50%; left: 50%; width: 360px; height: 520px; transform: translate(-50%, -50%) translateX(var(--x)) scale(var(--s)) rotateY(var(--ry)); opacity: var(--o); z-index: var(--z); transition: transform 600ms cubic-bezier(.2,.7,.15,1), opacity 600ms ease, filter 600ms ease; filter: blur(var(--blur)); cursor: pointer; will-change: transform, opacity, filter; } .slot[data-pos="0"] { cursor: default; } /* ================== AGENT CARD ================== */ .card { position: relative; width: 100%; height: 100%; background: var(--bg-2); border: 1px solid var(--hair); display: flex; flex-direction: column; overflow: hidden; transition: border-color 400ms ease, box-shadow 400ms ease; } /* "frame within frame" — like a portrait in a gallery */ [data-decor="on"] .card::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--hair); pointer-events: none; z-index: 2; } .card .corner { position: absolute; width: 16px; height: 16px; border-color: var(--hair-strong); border-style: solid; border-width: 0; pointer-events: none; z-index: 3; } [data-decor="on"] .card .corner.tl { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; } [data-decor="on"] .card .corner.tr { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; } [data-decor="on"] .card .corner.bl { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; } [data-decor="on"] .card .corner.br { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; } .card-portrait { position: relative; height: 360px; overflow: hidden; background: radial-gradient(ellipse 60% 80% at 50% 45%, rgba(255, 245, 220, 0.08), transparent 70%), linear-gradient(180deg, #15140f 0%, #0a0907 100%); } [data-theme="graphite"] .card-portrait { background: radial-gradient(ellipse 60% 80% at 50% 45%, rgba(180, 210, 240, 0.07), transparent 70%), linear-gradient(180deg, #14181d 0%, #08090c 100%); } [data-theme="alchemy"] .card-portrait { background: radial-gradient(ellipse 60% 80% at 50% 45%, rgba(220, 170, 100, 0.10), transparent 70%), linear-gradient(180deg, #15110b 0%, #0a0805 100%); } /* placeholder — soft silhouette / light-spot */ .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .placeholder svg.placeholder-svg { width: 100%; height: 100%; opacity: 0.85; position: absolute; inset: 0; } .placeholder .silhouette-blob { filter: blur(28px); opacity: 0.55; } .placeholder .silhouette-shape { opacity: 0.18; } /* Real photo */ .portrait-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0; transition: opacity 800ms ease; filter: saturate(0.92) contrast(1.02); } .portrait-photo.loaded { opacity: 1; } /* Vignette over photo — integrates it into the dark gallery */ .portrait-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 100% at 50% 30%, transparent 40%, rgba(0,0,0,0.45) 100%), linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.55) 100%); z-index: 2; } [data-theme="alchemy"] .portrait-photo { filter: saturate(0.85) contrast(1.05) sepia(0.08); } [data-theme="graphite"] .portrait-photo { filter: saturate(0.75) contrast(1.05) hue-rotate(-8deg); } .placeholder-tag { position: absolute; top: 18px; left: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); z-index: 4; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .placeholder-tag .num { color: var(--ink-2); margin-right: 8px; } .card-meta { flex: 1; display: flex; flex-direction: column; padding: 24px 26px 26px; gap: 0; border-top: 1px solid var(--hair); position: relative; } .card-meta .role { font-size: 10px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .card-meta .name { font-family: var(--font-display); font-size: 36px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; color: var(--ink); } .card-meta .role-line { margin-top: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.4; } .card-meta .demo-tag { position: absolute; top: 24px; right: 26px; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 6px; } .card-meta .demo-tag .pulse { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* WIP card variant */ .card.wip .card-portrait { background: radial-gradient(ellipse 60% 80% at 50% 45%, rgba(150, 150, 150, 0.04), transparent 70%), linear-gradient(180deg, #0c0c0c 0%, #060606 100%); } .card.wip .placeholder svg { opacity: 0.4; filter: blur(2px); } .card.wip .name { color: var(--ink-2); } .card.wip .wip-banner { position: absolute; bottom: 18px; left: 18px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); padding: 6px 10px; border: 1px solid var(--hair-strong); background: rgba(0, 0, 0, 0.4); } /* focus state — center card */ .slot[data-pos="0"] .card { border-color: var(--hair-strong); box-shadow: 0 0 0 1px var(--hair), 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 80px -20px var(--glow); } .slot[data-pos="0"] .card-portrait::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 90% at 50% 30%, var(--accent-soft), transparent 70%); pointer-events: none; opacity: 0.6; } /* ================== CAROUSEL CHROME ================== */ .carousel-controls { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 32px; font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--ink-3); } .arrow-btn { width: 44px; height: 44px; border: 1px solid var(--hair-strong); display: flex; align-items: center; justify-content: center; transition: all 250ms ease; color: var(--ink-2); } .arrow-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; } .arrow-btn svg { width: 16px; height: 16px; } .counter { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--ink-2); display: flex; align-items: center; gap: 10px; min-width: 80px; justify-content: center; } .counter .total { color: var(--ink-4); } .dotbar { display: flex; gap: 8px; margin-top: 22px; align-items: center; justify-content: center; } .dot-tick { width: 18px; height: 1px; background: var(--ink-4); transition: all 300ms ease; cursor: pointer; } .dot-tick.active { background: var(--accent); height: 2px; width: 28px; } .dot-tick.wip { background: var(--ink-4); opacity: 0.4; } .kbd-hint { margin-top: 28px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4); display: flex; gap: 18px; justify-content: center; } .kbd { display: inline-flex; align-items: center; gap: 4px; } .kbd kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border: 1px solid var(--hair-strong); color: var(--ink-2); background: var(--bg-2); border-radius: 2px; } /* ================== FOOTER ================== */ .footer { border-top: 1px solid var(--hair); padding: 40px 36px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 60px; font-size: 12px; color: var(--ink-3); } .footer .links { display: flex; gap: 28px; } .footer .links a:hover { color: var(--ink); } .footer .center { font-family: var(--font-display); font-size: 14px; color: var(--ink-2); text-align: center; } .footer .right { text-align: right; font-family: var(--font-mono); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .footer .right .copy { font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; } .footer .right .legal-links { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .footer .right .legal-links button { background: none; border: 0; color: var(--ink-2); font: inherit; cursor: pointer; padding: 0; letter-spacing: inherit; text-transform: inherit; transition: color .2s ease; } .footer .right .legal-links button:hover { color: var(--ink); } .footer .right .legal-links .sep { color: var(--ink-4); } /* ================== CASE PAGE ================== */ .case-page { min-height: 100vh; padding: 100px 0 80px; animation: caseEnter 700ms cubic-bezier(.2,.7,.15,1); } @keyframes caseEnter { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } .case-back { position: fixed; top: 22px; left: 36px; z-index: 60; display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--ink-2); transition: color 200ms ease; } .case-back:hover { color: var(--accent); } .case-wrap { max-width: 1100px; margin: 0 auto; padding: 0 36px; } .case-header { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: end; padding-bottom: 48px; border-bottom: 1px solid var(--hair); margin-bottom: 56px; } .case-portrait { width: 380px; height: 480px; border: 1px solid var(--hair-strong); position: relative; overflow: hidden; } .case-portrait .frame { position: absolute; inset: 12px; border: 1px solid var(--hair); pointer-events: none; z-index: 3; } .case-portrait .card-portrait { height: 100%; } .case-portrait .placeholder-tag { top: 22px; left: 22px; } .case-title { display: flex; flex-direction: column; } .case-title .id-line { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .case-title .id-line .line { width: 60px; height: 1px; background: var(--hair-strong); } .case-title h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.015em; margin: 0 0 14px; } .case-title .role { font-size: 17px; color: var(--ink-2); line-height: 1.4; max-width: 30ch; } .case-title .demo-tag { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); align-self: flex-start; } .case-title .demo-tag .pulse { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); animation: pulse 2.4s ease-in-out infinite; } /* case body */ .case-section { display: grid; grid-template-columns: 200px 1fr; gap: 72px; padding: 36px 0; border-bottom: 1px solid var(--hair); } .case-section .label { font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--ink-3); font-family: var(--font-body); padding-top: 8px; } .case-section .body { font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 65ch; text-wrap: pretty; } .case-section .body em { color: var(--accent); font-style: italic; font-family: var(--font-display); font-size: 1.05em; } .stack-list { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); } .stack-list span { position: relative; } .stack-list span:not(:last-child)::after { content: "·"; margin-left: 18px; color: var(--ink-4); } .price-grid { display: flex; gap: 64px; } .price-cell { display: flex; flex-direction: column; } .price-cell .small { font-size: 10px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .price-cell .big { font-family: var(--font-display); font-size: 32px; color: var(--ink); font-weight: 400; line-height: 1; } .price-note { margin-top: 16px; font-size: 13px; color: var(--ink-3); font-style: italic; } /* CTA blocks */ .cta-row { display: flex; gap: 16px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 28px; border: 1px solid var(--hair-strong); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); transition: all 250ms ease; cursor: pointer; background: transparent; } .btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .btn.primary { border-color: var(--accent); color: var(--bg); background: var(--accent); } .btn.primary:hover { background: transparent; color: var(--accent); } .btn .arrow { width: 14px; height: 14px; } .cta-block { margin-top: 48px; padding: 56px 0; text-align: center; border-top: 1px solid var(--hair); } .cta-block .eyebrow { margin-bottom: 18px; } .cta-block h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; margin: 0 0 28px; letter-spacing: -0.01em; } .cta-block h3 em { color: var(--accent); font-style: italic; } .not-for-sale { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--ink-2); } /* ================== FAQ ================== */ .faq-page { min-height: 100vh; padding: 140px 0 80px; animation: caseEnter 600ms ease; } .faq-wrap { max-width: 880px; margin: 0 auto; padding: 0 36px; } .faq-header { margin-bottom: 64px; padding-bottom: 36px; border-bottom: 1px solid var(--hair); } .faq-header .eyebrow { margin-bottom: 14px; } .faq-header h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 6vw, 84px); line-height: 1; letter-spacing: -0.015em; margin: 0 0 16px; } .faq-header h1 em { color: var(--accent); font-style: italic; } .faq-header .lede { font-size: 16px; color: var(--ink-2); line-height: 1.5; max-width: 50ch; } .faq-item { border-bottom: 1px solid var(--hair); padding: 0; } .faq-q { width: 100%; text-align: left; padding: 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; transition: color 200ms ease; } .faq-q:hover { color: var(--accent); } .faq-q .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--ink-3); min-width: 36px; flex: 0 0 auto; } .faq-q .text { font-family: var(--font-display); font-size: 24px; font-weight: 400; flex: 1; line-height: 1.25; } .faq-q .toggle { width: 18px; height: 18px; position: relative; flex: 0 0 auto; } .faq-q .toggle::before, .faq-q .toggle::after { content: ""; position: absolute; background: var(--ink-2); transition: all 300ms ease; } .faq-q .toggle::before { top: 50%; left: 0; right: 0; height: 1px; } .faq-q .toggle::after { left: 50%; top: 0; bottom: 0; width: 1px; } .faq-item.open .faq-q .toggle::after { transform: scaleY(0); } .faq-item.open .faq-q { color: var(--accent); } .faq-item.open .faq-q .toggle::before { background: var(--accent); } .faq-a { overflow: hidden; max-height: 0; transition: max-height 500ms cubic-bezier(.2,.7,.15,1); } .faq-item.open .faq-a { max-height: 400px; } .faq-a-inner { padding: 0 0 36px 60px; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; } /* ================== TWEAKS PANEL TWEAKS ================== */ .tweaks-info { font-size: 11px; color: var(--ink-3); line-height: 1.5; letter-spacing: 0.02em; padding: 4px 0; } /* ================== RESPONSIVE ================== */ @media (max-width: 900px) { .topbar { padding: 18px 22px; } .case-back { left: 22px; } .hero { padding-top: 110px; } .case-header { grid-template-columns: 1fr; gap: 36px; } .case-portrait { width: 100%; max-width: 380px; height: 460px; } .case-section { grid-template-columns: 1fr; gap: 14px; } .case-section .label { padding-top: 0; } .price-grid { gap: 32px; flex-wrap: wrap; } .footer { grid-template-columns: 1fr; text-align: center; gap: 16px; } .footer .right { text-align: center; } .footer .links { justify-content: center; } .slot { width: 280px; height: 420px; } .carousel-stage { height: 480px; } } @media (max-width: 600px) { .slot { width: 240px; height: 360px; } .carousel-stage { height: 420px; } .card-portrait { height: 240px; } .card-meta .name { font-size: 28px; } .kbd-hint { display: none; } } /* page transitions wrapper */ .page-fade-enter { animation: pageEnter 600ms cubic-bezier(.2,.7,.15,1); } @keyframes pageEnter { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } } .hero-fade { opacity: 1; } .gallery-fade { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .hero-fade { opacity: 0; animation: heroIn 1100ms cubic-bezier(.2,.7,.15,1) forwards; } .gallery-fade { opacity: 0; animation: galleryIn 1400ms cubic-bezier(.2,.7,.15,1) 900ms forwards; } } @keyframes heroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes galleryIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ================== REQUISITES MODAL ================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 32px 24px; animation: modalFade 320ms ease-out; } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } .modal { position: relative; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); border: 1px solid var(--hair-strong); max-width: 540px; width: 100%; padding: 56px 48px 44px; animation: modalRise 420ms cubic-bezier(.2, .7, .15, 1); box-shadow: 0 0 0 1px var(--frame) inset, 0 30px 80px rgba(0, 0, 0, 0.6); } @keyframes modalRise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--hair); pointer-events: none; } .modal-close { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: var(--ink-3); font-size: 28px; cursor: pointer; line-height: 1; width: 36px; height: 36px; transition: color .2s ease; } .modal-close:hover { color: var(--ink); } .modal-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--eyebrow-tracking); color: var(--accent); text-transform: uppercase; margin-bottom: 16px; } .modal-title { font-size: 38px; line-height: 1.05; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 32px; } .modal-title em { color: var(--accent); font-style: italic; } .req-list { margin: 0; padding: 0; border-top: 1px solid var(--hair); } .req-row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); align-items: baseline; } .req-row dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--eyebrow-tracking); color: var(--ink-3); text-transform: uppercase; margin: 0; } .req-row dd { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.4; } .req-row dd.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; } .req-row dd a { color: var(--accent); transition: color .2s ease; } .req-row dd a:hover { color: var(--ink); } .modal-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-2); line-height: 1.55; font-style: italic; } /* ================== LEGAL / PRIVACY PAGE ================== */ .legal-page { min-height: 100vh; animation: caseEnter 600ms cubic-bezier(.2,.7,.15,1); } .legal-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .legal-topbar .back { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--ink-2); font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; cursor: pointer; padding: 0; transition: color .2s ease; justify-self: start; } .legal-topbar .back:hover { color: var(--ink); } .legal-topbar .brand { justify-self: center; } .legal-main { max-width: 720px; margin: 0 auto; padding: 60px 36px 100px; } .legal-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--eyebrow-tracking); color: var(--accent); text-transform: uppercase; margin-bottom: 24px; } .legal-title { font-size: 64px; line-height: 1.0; letter-spacing: -0.02em; font-weight: 400; color: var(--ink); margin: 0 0 28px; } .legal-title em { color: var(--accent); font-style: italic; } .legal-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--hair); } .legal-body { font-size: 15px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; } .legal-body h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: var(--serif-tracking); margin: 36px 0 12px; } .legal-body h3:first-child { margin-top: 0; } .legal-body p { margin: 0 0 14px; } .legal-body ul { margin: 6px 0 14px; padding-left: 22px; list-style: none; } .legal-body ul li { position: relative; padding: 4px 0; } .legal-body ul li::before { content: "—"; position: absolute; left: -22px; color: var(--ink-4); } .legal-body a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 3px; transition: text-decoration-color .2s ease; } .legal-body a:hover { text-decoration-color: var(--accent); } .legal-body .mono { font-family: var(--font-mono); font-size: 13px; } .legal-back { margin-top: 48px; } @media (max-width: 720px) { .modal { padding: 48px 28px 36px; } .modal-title { font-size: 30px; } .req-row { grid-template-columns: 90px 1fr; gap: 10px; } .legal-title { font-size: 44px; } .legal-main { padding: 40px 22px 80px; } } /* Mobile topbar — solid background to fix text bleed-through */ @media (max-width: 768px) { .topbar { background: rgba(5, 5, 5, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); } } /* Mobile case-back — solid chip so it does not bleed over hero photo */ @media (max-width: 768px) { .case-back { background: rgba(5, 5, 5, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 10px 14px; border: 1px solid var(--hair); } }