/* ============================================================ ADYTUM VAULT — site styles Palette sampled from the app itself (espresso / cream / gold). ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Light theme (the app's default look) */ --bg: #EFEADD; --bg-raised: #E5DDCF; --bg-sunken: #E8E1D3; --ink: #2A2018; /* near-black espresso text */ --ink-soft: #6E5E4C; /* muted brown body text */ --ink-faint: #93826C; /* captions */ --gold: #B78F67; /* the accent rule under the wordmark */ --gold-deep: #A9744A; --espresso: #5C4636; --espresso-deep: #3A2A1E; --line: #D8CDBB; /* hairlines */ --card-red: #8C4F4A; --card-green: #6C8169; --card-dark: #3A322A; /* Phone chrome — dark espresso bezel in both themes (modern phone look) */ --phone-bezel: #3A2E24; --phone-bezel-2: #251C14; --phone-screen-bg: var(--bg); /* Typography */ --serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif; --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Scale */ --maxw: 1180px; --gutter: clamp(20px, 5vw, 64px); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Dark theme — triggered by [data-theme="dark"] on . Only the *screenshots + phone chrome* flip the most; the site itself shifts to a warm near-black so the toggle feels global. */ html[data-theme="dark"] { --bg: #1D180F; --bg-raised: #2A2118; --bg-sunken: #17120B; --ink: #F3EADb; --ink-soft: #C9B89F; --ink-faint: #93826C; --gold: #D7A86E; --gold-deep: #C89B5E; --line: #3A2F22; --phone-bezel: #2A2620; --phone-bezel-2: #14110C; } /* ---------- 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; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color 0.6s var(--ease), color 0.6s var(--ease); overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.08; } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .eyebrow { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); margin: 0 0 1.1rem; } html[data-theme="dark"] .eyebrow { color: var(--gold); } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid transparent; transition: background-color 0.6s var(--ease), border-color 0.4s var(--ease); } .nav.scrolled { border-bottom-color: var(--line); } .nav__brand { font-family: var(--serif); font-style: italic; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); } .nav__right { display: flex; align-items: center; gap: 18px; } .nav__links { display: flex; gap: 22px; } .nav__links a { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-soft); font-weight: 500; transition: color 0.2s; } .nav__links a:hover { color: var(--ink); } /* Theme toggle */ .toggle { display: inline-flex; align-items: center; gap: 9px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 100px; padding: 5px 6px 5px 13px; cursor: pointer; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-soft); text-transform: uppercase; transition: all 0.3s var(--ease); } .toggle:hover { border-color: var(--gold); } .toggle__track { width: 38px; height: 22px; border-radius: 100px; background: var(--espresso-deep); position: relative; flex: none; transition: background 0.4s var(--ease); } html[data-theme="dark"] .toggle__track { background: var(--gold-deep); } .toggle__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; transition: transform 0.4s var(--ease), background 0.4s var(--ease); } html[data-theme="dark"] .toggle__thumb { transform: translateX(16px); } .toggle__thumb svg { width: 11px; height: 11px; } /* Language select */ .lang { position: relative; } .lang__btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; letter-spacing: 0.04em; transition: border-color 0.2s, color 0.2s; } .lang__btn:hover { border-color: var(--gold); color: var(--ink); } .lang__menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; padding: 6px; min-width: 150px; box-shadow: 0 18px 50px rgba(0,0,0,0.18); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.22s var(--ease); z-index: 60; } .lang.open .lang__menu { opacity: 1; visibility: visible; transform: none; } .lang__menu button { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 9px 12px; border-radius: 9px; font-family: var(--sans); font-size: 0.86rem; color: var(--ink-soft); transition: background 0.15s, color 0.15s; } .lang__menu button:hover { background: var(--bg-sunken); color: var(--ink); } .lang__menu button[aria-selected="true"] { color: var(--gold-deep); font-weight: 600; } html[data-theme="dark"] .lang__menu button[aria-selected="true"] { color: var(--gold); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding-top: clamp(120px, 16vh, 190px); padding-bottom: clamp(60px, 10vh, 120px); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .hero__logo { position: relative; width: min(260px, 56%); aspect-ratio: 877 / 528; margin-bottom: 22px; } /* logo crossfade light/dark */ .hero__logo img { width: 100%; height: auto; display: block; transition: opacity 0.5s var(--ease); } .hero__logo img.is-dark { position: absolute; inset: 0; opacity: 0; } html[data-theme="dark"] .hero__logo img.is-light { opacity: 0; } html[data-theme="dark"] .hero__logo img.is-dark { opacity: 1; } .hero h1 { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.0; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.2rem; } .hero h1 em { font-style: italic; color: var(--gold-deep); } html[data-theme="dark"] .hero h1 em { color: var(--gold); } .hero__sub { font-size: 1.18rem; color: var(--ink-soft); max-width: 30ch; margin-bottom: 2rem; } .hero__cta { display: inline-flex; align-items: center; gap: 11px; background: var(--espresso-deep); color: #F3EADb; font-weight: 600; font-size: 0.95rem; padding: 14px 26px; border-radius: 100px; transition: transform 0.25s var(--ease), background 0.3s; cursor: pointer; } html[data-theme="dark"] .hero__cta { background: var(--gold-deep); color: #1D180F; } .hero__cta:hover { transform: translateY(-2px); } .hero__cta small { font-weight: 500; opacity: 0.7; font-size: 0.78em; } .hero__note { margin-top: 14px; font-size: 0.82rem; color: var(--ink-faint); display: flex; align-items: center; gap: 7px; } /* Hero phone stack */ .hero__stage { position: relative; display: grid; place-items: center; min-height: 560px; } .hero__stack { position: relative; transform: scale(0.92); } /* ---------- Phone (CSS frame) ---------- */ .phone { position: relative; width: 270px; aspect-ratio: 1080 / 2197; border-radius: 34px; background: linear-gradient(150deg, var(--phone-bezel), var(--phone-bezel-2)); padding: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 30px 70px -20px rgba(40,28,16,0.45); transition: background 0.6s var(--ease), box-shadow 0.6s var(--ease); } .phone::after { /* side button */ content: ""; position: absolute; right: -2px; top: 130px; width: 3px; height: 56px; border-radius: 2px; background: var(--phone-bezel-2); } .phone__screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--phone-screen-bg); } .phone__notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.55); z-index: 3; } .phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* crossfade light/dark screenshots */ .phone__screen img { transition: opacity 0.5s var(--ease); } .phone__screen img.is-dark { position: absolute; inset: 0; opacity: 0; } html[data-theme="dark"] .phone__screen img.is-light { opacity: 0; } html[data-theme="dark"] .phone__screen img.is-dark { opacity: 1; } /* Stacked / fanned hero phones */ .hero__stack .phone { position: absolute; transition: transform 1s var(--ease-out), opacity 0.8s var(--ease); } /* Start state: phones collapsed behind the front one, faded */ .hero__stack:not(.settled) .phone--back2, .hero__stack:not(.settled) .phone--back1, .hero__stack:not(.settled) .phone--front2 { transform: translate(0, 14px) rotate(0deg) scale(0.9); opacity: 0; } .hero__stack:not(.settled) .phone--front { transform: translate(0, 14px) scale(0.96); opacity: 0; } /* Settled (fanned out) state */ .hero__stack.settled .phone--back2 { transform: translate(-130px, 18px) rotate(-9deg) scale(0.86); opacity: 0.55; filter: brightness(0.96); z-index: 1; } .hero__stack.settled .phone--back1 { transform: translate(-66px, 9px) rotate(-4.5deg) scale(0.93); opacity: 0.8; z-index: 2; } .hero__stack.settled .phone--front { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; z-index: 3; } .hero__stack.settled .phone--front2 { transform: translate(66px, 9px) rotate(4.5deg) scale(0.93); opacity: 0.8; z-index: 2; } /* stagger the fan-out */ .hero__stack.settled .phone--front { transition-delay: 0.05s; } .hero__stack.settled .phone--back1 { transition-delay: 0.18s; } .hero__stack.settled .phone--front2 { transition-delay: 0.26s; } .hero__stack.settled .phone--back2 { transition-delay: 0.34s; } /* ============================================================ FEATURE SECTIONS ============================================================ */ .features { position: relative; padding-block: clamp(40px, 8vh, 90px); } .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; padding-block: clamp(60px, 11vh, 130px); } .feature > * { min-width: 0; } .feature:nth-child(even) .feature__media { order: 2; } .feature:nth-child(even) .feature__copy { order: 1; } .feature__copy { max-width: 30rem; } .feature h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.1rem; overflow-wrap: break-word; } .feature h2 em { font-style: italic; color: var(--gold-deep); } html[data-theme="dark"] .feature h2 em { color: var(--gold); } .feature p { color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 1.4rem; } .feature__list { list-style: none; padding: 0; margin: 1.4rem 0 0; } .feature__list li { position: relative; padding-left: 26px; margin-bottom: 0.7rem; color: var(--ink-soft); font-size: 0.98rem; } .feature__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } /* Feature media — phones, sometimes two */ .feature__media { display: flex; justify-content: center; align-items: center; gap: 18px; position: relative; } .feature__media .phone { width: 235px; } .feature__media .phone--lift { transform: translateY(-26px) rotate(-3deg); } .feature__media .phone--drop { transform: translateY(26px) rotate(3deg); } .feature__media.single .phone { width: 260px; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } /* ============================================================ CARDS SHOWCASE STRIP (between features) — uses real card colors ============================================================ */ .palette-strip { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding-block: 20px; } .swatch { width: 92px; height: 58px; border-radius: 12px; display: grid; place-items: end start; padding: 8px; font-size: 0.62rem; color: rgba(255,255,255,0.85); font-weight: 600; letter-spacing: 0.04em; } /* ============================================================ SECURITY BANNER (full-bleed quote) ============================================================ */ .creed { text-align: center; padding-block: clamp(80px, 14vh, 170px); background: var(--bg-sunken); transition: background-color 0.6s var(--ease); } .creed__mark { font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.16; color: var(--ink); max-width: 17ch; margin: 0 auto; } .creed__mark span { color: var(--gold-deep); } html[data-theme="dark"] .creed__mark span { color: var(--gold); } .creed__sub { margin-top: 1.8rem; color: var(--ink-soft); font-size: 1.05rem; } /* ============================================================ SYNC SECTION ============================================================ */ .sync { padding-block: clamp(70px, 12vh, 140px); } .sync__card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 26px; padding: clamp(30px, 5vw, 60px); max-width: 760px; margin: 0 auto; position: relative; overflow: hidden; } .sync__badge { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 22%, transparent); padding: 5px 12px; border-radius: 100px; margin-bottom: 1.3rem; } html[data-theme="dark"] .sync__badge { color: var(--gold); } .sync__card h2 { font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--ink); margin-bottom: 1rem; } .sync__card p { color: var(--ink-soft); margin: 0 0 1rem; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); padding-block: clamp(44px, 7vh, 80px); } .footer__grid { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 28px; } .footer__brand { font-family: var(--serif); font-style: italic; font-size: 1.7rem; color: var(--ink); margin-bottom: 0.4rem; } .footer__made { color: var(--ink-faint); font-size: 0.9rem; } .footer__made a { color: var(--gold-deep); font-weight: 600; } html[data-theme="dark"] .footer__made a { color: var(--gold); } .footer__links { display: flex; gap: 22px; flex-wrap: wrap; } .footer__links a { color: var(--ink-soft); font-size: 0.9rem; transition: color 0.2s; } .footer__links a:hover { color: var(--ink); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .nav__links { display: none; } .hero__grid { grid-template-columns: 1fr; text-align: center; } .hero__logo { margin-inline: auto; } .hero__sub { margin-inline: auto; } .hero__stage { min-height: 470px; margin-top: 30px; } .feature { grid-template-columns: 1fr; gap: 36px; text-align: center; padding-block: 64px; } .feature h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); } .feature__copy { max-width: 100%; } .feature p { font-size: 1rem; } .feature__media { gap: 10px; } .feature__media .phone { width: 150px; } .feature__media .phone--lift { transform: translateY(-14px) rotate(-3deg); } .feature__media .phone--drop { transform: translateY(14px) rotate(3deg); } .feature:nth-child(even) .feature__media { order: 0; } .feature:nth-child(even) .feature__copy { order: 0; } .feature__copy { margin-inline: auto; } .feature__list { display: inline-block; text-align: left; } .footer__grid { flex-direction: column; align-items: center; text-align: center; } } @media (max-width: 480px) { .phone { width: 230px; } .feature__media .phone { width: 200px; } .feature__media.single .phone { width: 235px; } .hero__stack .phone--back2, .hero__stack .phone--front2 { display: none; } .hero__stack .phone--back1 { transform: translate(-44px, 8px) rotate(-5deg) scale(0.9); } } /* Secondary (legal) pages */ .legal { padding-top: 130px; padding-bottom: 80px; max-width: 760px; } .legal h1 { font-family: var(--serif); font-size: clamp(2.2rem,5vw,3.4rem); margin-bottom: 0.4rem; } .legal .updated { color: var(--ink-faint); font-size: 0.85rem; margin-bottom: 2.5rem; } .legal h2 { font-family: var(--serif); font-size: 1.6rem; margin: 2.4rem 0 0.8rem; color: var(--ink); } .legal p, .legal li { color: var(--ink-soft); } .legal ul { padding-left: 1.2rem; } .legal a { color: var(--gold-deep); font-weight: 600; } .legal__back { display: inline-block; margin-bottom: 2rem; color: var(--ink-soft); font-size: 0.9rem; }