/* ========================================================================== TheVincis — Premium Minimalism Design system: DESIGN.md · Vinci Gold · Playfair Display + Montserrat ========================================================================== */ :root { /* Colors */ --surface: #f9f9f9; --surface-white: #ffffff; --surface-dim: #eeeeee; --ink: #1a1a1a; --ink-soft: #4d4635; --gold: #c5a028; --gold-fine: #d4af37; --gold-deep: #745b00; --gold-tint: #ffe08b; --line: #e5e5e5; --charcoal: #1a1a1a; --charcoal-2: #232323; --on-dark: #f1f1f1; --on-dark-dim: rgba(241, 241, 241, 0.64); /* Type — Inter Tight: tight neutral grotesk for display; Manrope: body copy */ --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --sans: "Manrope", "Segoe UI", sans-serif; /* Layout — fluid margins so the design fills the screen at every width */ --container: 1920px; --gutter: 24px; --margin: clamp(16px, 2.5vw, 40px); --radius: 0.5rem; --radius-lg: 1rem; /* Depth */ --lift: 0 20px 40px rgba(0, 0, 0, 0.04); --lift-hover: 0 28px 56px rgba(0, 0, 0, 0.08); } /* ============ Reset & base ============ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; /* Lenis / GSAP own scrolling */ overflow-x: clip; /* entrance animations may transiently poke past the viewport */ } body { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; /* horizontal clipping lives on (overflow-x: clip) — an overflow value here would create a scroll container and break position: sticky */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; border: none; background: none; cursor: pointer; } ::selection { background: var(--gold-tint); color: var(--ink); } /* Reading flow: no mid-word breaks, graceful rag, no orphan words */ p, li, figcaption { hyphens: none; overflow-wrap: normal; text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; } /* ============ Utilities ============ */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--margin); } .container--narrow { max-width: 1440px; } .label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); } .label--gold { color: var(--gold-fine); } .section-title { font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin-top: 18px; } .section-title em, .hero__title em, .blade__title em, .contact__title em { font-style: italic; color: var(--gold); } .section-head { margin-bottom: clamp(28px, 3.5vw, 44px); } .section-head--tight { margin-bottom: clamp(18px, 2.5vw, 32px); } /* Marketing hook lines */ .hook { font-family: var(--display); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--ink-soft); margin-top: 20px; max-width: 640px; } .hook em { font-style: italic; color: var(--gold); } .hook--dark { color: var(--on-dark-dim); } .split-target { visibility: hidden; } /* prevent flash of unsplit text */ .card { background: var(--surface-white); border-radius: var(--radius-lg); box-shadow: var(--lift); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips span { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding: 6px 14px; border-radius: 9999px; background: var(--surface); color: var(--ink); } /* ============ Buttons ============ */ .btn { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 32px; border-radius: var(--radius); transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; will-change: transform; } .btn--gold { background: linear-gradient(135deg, var(--gold-fine), var(--gold)); color: #ffffff; box-shadow: 0 8px 24px rgba(197, 160, 40, 0.28); } .btn--gold:hover { transform: scale(1.02); background: var(--gold-deep); box-shadow: 0 12px 32px rgba(197, 160, 40, 0.38); } .btn--ghost { border: 1px solid var(--gold); color: var(--gold-deep); } .btn--ghost:hover { transform: scale(1.02); background: rgba(197, 160, 40, 0.06); } .btn--full { width: 100%; text-align: center; } /* ============ Preloader ============ */ .preloader { position: fixed; inset: 0; z-index: 1000; background: var(--surface); display: grid; place-items: center; } .preloader__inner { text-align: center; } .preloader__logo { font-family: var(--display); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; letter-spacing: -0.02em; display: block; } .preloader__logo em { font-style: italic; color: var(--gold); } .preloader__count { display: block; margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; color: var(--ink-soft); } /* ============ Cursor ============ */ .cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); pointer-events: none; z-index: 950; opacity: 0; transform: translate(-50%, -50%); } @media (hover: none), (max-width: 799px) { .cursor { display: none; } } /* ============ Navigation ============ */ /* A floating pill: the bar itself carries no background, so the pill reads as an object over whatever is behind it. The monogram and the region tag sit in the corners, clear of the pill. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 800; padding: 14px var(--margin); transition: transform 0.4s ease; } .nav--hidden { transform: translateY(-100%); } /* Corner monogram — the favicon's gold V, decorative; the wordmark is the link */ .nav__mark { position: absolute; left: var(--margin); top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--gold); line-height: 1; pointer-events: none; } /* Region tag, opposite corner */ .nav__tag { position: absolute; right: var(--margin); top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; pointer-events: none; color: var(--gold); } /* The pill */ .nav__inner { width: max-content; max-width: calc(100% - 260px); margin-inline: auto; padding: 9px 9px 9px 22px; display: flex; align-items: center; gap: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.09); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .nav__logo { font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; } .nav__logo em { font-style: normal; color: var(--gold); } /* Over the dark hero the pill inverts to smoked glass. Toggled by js/hero-sequence.js for as long as the hero holds the screen. */ .nav--over-hero { color: var(--on-dark); } .nav--over-hero .nav__inner { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4); } .nav--over-hero .nav__logo em, .nav--over-hero .nav__label span:last-child { color: var(--gold-fine); } .nav--over-hero .nav__tag { color: var(--gold-fine); } .nav--over-hero .nav__toggle span { background: var(--on-dark); } .nav__links { display: flex; gap: 26px; align-items: center; } .nav__link { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 0; white-space: nowrap; } /* Rolling label: duplicate slides up on hover, gold copy takes its place */ .nav__label { display: inline-block; overflow: hidden; height: 1em; line-height: 1; } .nav__label span { display: block; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .nav__label span:last-child { color: var(--gold-deep); } .nav__link:hover .nav__label span { transform: translateY(-100%); } /* The CTA is the dark pill that closes the bar */ .nav__cta { display: flex; align-items: center; gap: 7px; margin-left: 2px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease; } .nav__cta .nav__label span:last-child { color: var(--gold-tint); } .nav__cta:hover { background: var(--gold-deep); transform: translateY(-1px); } .nav--over-hero .nav__cta { background: var(--on-dark); color: #111; } .nav--over-hero .nav__cta .nav__label span:last-child { color: var(--gold-deep); } .nav--over-hero .nav__cta:hover { background: var(--gold-fine); color: #111; } .nav__arrow { transition: transform 0.3s ease; } .nav__cta:hover .nav__arrow { transform: translate(3px, -3px); } .nav__toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); transition: background 0.3s ease; } .nav__toggle span { width: 16px; height: 1.5px; background: var(--ink); transition: transform 0.3s ease, opacity 0.3s ease; } .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); } .nav--over-hero .nav__toggle { background: rgba(255, 255, 255, 0.14); } .mobile-menu { position: fixed; inset: 0; z-index: 790; background: var(--surface); display: none; align-items: center; justify-content: center; text-align: center; } .mobile-menu.is-open { display: flex; } .mobile-menu nav { display: flex; flex-direction: column; gap: 28px; } .mobile-menu a { font-family: var(--display); font-size: 2rem; font-weight: 600; } .mobile-menu__cta { color: var(--gold); font-style: italic; } /* ============ Hero ============ */ /* The page's one dark room. The film's own background colour (#0d0d0d, measured at its frame edges) is also the section's background — the sequence needs no blending and the letterbox never shows at any aspect ratio. Kept in step with FILM_BG in js/hero-sequence.js. */ .hero { min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 96px; background: #0d0d0d; color: var(--on-dark); } /* The scrubbed frame sequence — painted by js/hero-sequence.js */ .hero__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero__frames { display: block; width: 100%; height: 100%; } /* Legibility, not decoration. The copy is centred, so the core of the frame is deepened and the falloff is tuned to end before the helix's outer arms — they stay bright and flank the headline instead of fighting it. */ .hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(46% 54% at 50% 50%, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.88) 52%, rgba(0, 0, 0, 0.52) 78%, transparent 100%), radial-gradient(140% 96% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.5) 100%); } .hero__thread { position: absolute; inset: 0; z-index: 2; /* the cursor's gold silk rides over the film, under the copy */ pointer-events: none; } .hero__content { position: relative; z-index: 3; width: 100%; text-align: center; } .hero__label { margin-bottom: 22px; } .hero__title { font-family: var(--display); font-size: clamp(2.6rem, 7.4vw, 6.6rem); font-weight: 700; line-height: 1.03; letter-spacing: -0.035em; /* the grotesk wants tight tracking at display size */ /* the headline stays inside the scrim's dark core, so the helix's outer arms are never asked to sit behind type */ max-width: min(1000px, 74vw); margin-inline: auto; } .hero__sub { max-width: 620px; margin: 26px auto 0; font-size: 18px; line-height: 1.6; color: var(--ink-soft); } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } /* The class is reused for CTA rows in left-aligned sections across every page, so only the centred homepage hero centres its buttons. */ .hero .hero__ctas { justify-content: center; } /* On black the palette's dark-surface tokens take over inside the hero */ .hero__title { color: var(--on-dark); } .hero__title em { color: var(--gold-fine); } .hero .label { color: var(--gold-fine); } .hero__sub { color: var(--on-dark-dim); } .hero .btn--ghost { border-color: rgba(212, 175, 55, 0.62); color: var(--gold-fine); } .hero .btn--ghost:hover { background: rgba(212, 175, 55, 0.12); } .hero__scrollhint { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; } .hero__scrollhint span:last-child { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--on-dark-dim); } .hero__scrolldot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-fine); animation: scrolldot 2.2s ease-in-out infinite; } @keyframes scrolldot { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } /* ============ Marquee ============ */ .marquee { border-block: 0.5px solid var(--line); padding: 22px 0; overflow: hidden; background: var(--surface-white); } .marquee__inner { display: flex; width: max-content; will-change: transform; } .marquee__inner span { font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.5rem); font-style: italic; white-space: nowrap; color: var(--ink-soft); } /* ============ Manifesto ============ */ .manifesto-section { padding: clamp(48px, 6vw, 88px) 0; overflow: hidden; } .manifesto__layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 96px); /* the golden rectangle shares a top edge with the copy rather than floating centred against it — the sketch's viewBox is cropped to the rectangle so the line you see is the line that aligns */ align-items: start; } .manifesto__visual { display: flex; justify-content: center; } .manifesto__sketchwrap { margin: 0; display: grid; gap: 18px; justify-items: center; } .manifesto__sketch { width: min(500px, 78vw); overflow: visible; } .sketch__frame :where(rect, line) { fill: none; stroke: var(--gold-fine); stroke-width: 0.7; opacity: 0.6; stroke-dasharray: 1; } .sketch__diagonals line { stroke: var(--gold-fine); stroke-width: 0.5; opacity: 0.32; stroke-dasharray: 1; } .sketch__spiral { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; } .sketch__heart { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; } .manifesto__sketch-note { font-family: var(--display); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); } .manifesto { font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.6rem); font-weight: 400; line-height: 1.45; margin-top: 24px; } .manifesto em { font-style: italic; color: var(--gold); } /* ============ Portfolio : shipped work ============ */ .work { padding: clamp(64px, 8vw, 120px) 0; } .work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); margin-top: clamp(28px, 3.5vw, 48px); } .work__card { display: flex; flex-direction: column; } .work__shot { display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--lift); background: var(--surface-dim); transition: transform 0.4s ease, box-shadow 0.4s ease; } .work__shot img { width: 100%; height: auto; display: block; } .work__card:hover .work__shot { transform: translateY(-6px); box-shadow: var(--lift-hover); } .work__meta { margin-top: 20px; } .work__name { font-family: var(--display); font-size: clamp(1.3rem, 1.9vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; } .work__desc { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); } .work__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .work__tags li { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 999px; padding: 5px 11px; } .work__link { margin-top: auto; padding-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); } .work__link:hover { color: var(--ink); } .work__cta { margin-top: clamp(36px, 4vw, 56px); text-align: center; } .work__cta .hook { margin-inline: auto; margin-bottom: 20px; } @media (max-width: 899px) { .work__grid { grid-template-columns: minmax(0, 1fr); } } /* ============ Services ============ */ .services { background: var(--surface-white); padding: clamp(48px, 6vw, 88px) 0; border-block: 0.5px solid var(--line); } /* Storytelling stack: each card holds (sticky) while the next slides over it */ .story-stack { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 36px); } .story-card { position: sticky; top: calc(92px + var(--peek, 0px)); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4.5vw, 80px); align-items: center; background: var(--surface); border: 0.5px solid rgba(212, 175, 55, 0.35); border-radius: var(--radius-lg); box-shadow: var(--lift-hover); padding: clamp(32px, 4.5vw, 72px); min-height: min(62vh, 540px); will-change: transform; } /* each successive card sticks a little lower so covered cards peek like a deck */ .story-card:nth-child(2) { --peek: 14px; } .story-card:nth-child(3) { --peek: 28px; } .story-card:nth-child(4) { --peek: 42px; } .story-card:nth-child(5) { --peek: 56px; } .story-card:nth-child(6) { --peek: 70px; } .story-card__num { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--gold); display: block; margin-bottom: 14px; } .story-card__content h3 { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; } .story-card__hook { font-family: var(--display); font-style: italic; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--gold-deep); margin-top: 10px; } .story-card__desc { color: var(--ink-soft); font-size: 15.5px; max-width: 540px; margin: 20px 0 24px; } .story-card .chips span { background: var(--surface-white); box-shadow: inset 0 0 0 0.5px var(--line); } .story-card__link { display: inline-block; margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid var(--gold-fine); padding-bottom: 3px; transition: color 0.25s ease; } .story-card__link:hover { color: var(--gold); } .story-card__art svg { display: block; width: 100%; max-width: 400px; margin-inline: auto; } .story-card [pathLength] { stroke-dasharray: 1; } /* ============ Services: the picture show — one scene at a time ============ */ .svc-cinema { position: relative; } .svc-stage { position: relative; } .svc-scene [pathLength] { stroke-dasharray: 1; } /* each scene's exhibit, standing on its pedestal */ .svc-scene__art { position: relative; width: min(300px, 70vw); margin-inline: auto; } .svc-scene__art svg { display: block; width: 100%; } .svc-scene__art::after { content: ""; position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: 64%; border-top: 2px solid var(--gold-fine); box-shadow: 0 8px 0 -1px rgba(212, 175, 55, 0.35); } /* Scene 03's exhibit is a live phone: its screen cycles through shipped apps */ .mock-phone { position: relative; aspect-ratio: 9 / 18.5; background: var(--surface-white); border: 2px solid var(--gold); border-radius: 38px; box-shadow: var(--lift), 0 24px 60px rgba(116, 91, 0, 0.18); padding: 12px 9px; overflow: hidden; } .mock-phone__cam { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0.75; z-index: 2; } .mock-phone__bar { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 34%; height: 3px; border-radius: 2px; background: var(--line); z-index: 2; } .mock-phone__screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #faf8f1; } .mock-app { position: absolute; inset: 0; padding: 24px 11px 16px; display: flex; flex-direction: column; gap: 9px; font-size: 11px; color: var(--ink); opacity: 0; /* JS runs the reel; without it (reduced motion) the first app stays */ } .mock-app:first-child { opacity: 1; } .mock-app header { display: flex; align-items: baseline; justify-content: space-between; } .mock-app header b { font-family: var(--display); font-size: 14px; font-weight: 600; } .mock-app header span { font-size: 8px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); } .mock-app__balance, .mock-app__kpi { background: var(--gold); color: #fff; border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; } .mock-app__balance small, .mock-app__kpi small { font-size: 8.5px; opacity: 0.85; } .mock-app__balance strong, .mock-app__kpi strong { font-family: var(--display); font-size: 17px; line-height: 1.1; } .mock-app ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .mock-app li, .mock-app__dish { display: flex; align-items: center; gap: 7px; background: var(--surface-white); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; } .mock-app li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--gold)); flex: none; } .mock-app li span, .mock-app__dish span { flex: 1; } .mock-app li b, .mock-app__dish b { font-weight: 600; } .mock-app li b.in { color: var(--gold-deep); } .mock-app__dish i { font-style: normal; font-size: 8px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); border: 1px solid var(--gold-fine); border-radius: 999px; padding: 2px 7px; } .mock-app__cart { margin-top: auto; background: var(--ink); color: #fff; text-align: center; border-radius: 10px; padding: 8px 10px; font-size: 10px; } .mock-app__bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; padding: 0 4px; margin-top: 4px; } .mock-app__bars i { flex: 1; height: var(--h, 50%); background: var(--gold); border-radius: 3px 3px 0 0; opacity: 0.85; } .mock-app__bars i:nth-child(odd) { background: var(--gold-fine); } /* ---- shared browser-window chrome for the other live mocks ---- */ .mock-win { display: flex; flex-direction: column; aspect-ratio: 10 / 7.6; background: var(--surface-white); border: 1.5px solid var(--gold-fine); border-radius: 14px; box-shadow: var(--lift), 0 24px 60px rgba(116, 91, 0, 0.14); overflow: hidden; } .mock-win__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #faf8f1; } .mock-win__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .mock-win__bar i:first-child { background: var(--gold); } .mock-win__bar span { margin-left: 6px; flex: 1; background: var(--surface-white); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 8.5px; color: var(--ink-soft); letter-spacing: 0.03em; } .mock-win__body { position: relative; flex: 1; padding: 12px; font-size: 10.5px; color: var(--ink); } .mock-screen { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; opacity: 0; /* JS runs the reels; without it the first screen stays */ } .mock-screen:first-child { opacity: 1; } .mock-head { display: flex; align-items: baseline; justify-content: space-between; } .mock-head b { font-family: var(--display); font-size: 13px; font-weight: 600; } .mock-head span { font-size: 8px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); } /* skeleton bars used across mocks */ .bar-sm, .bar-xs, .bar-h1 { display: block; height: 7px; width: var(--w, 60%); border-radius: 4px; background: var(--line); } .bar-xs { height: 5px; opacity: 0.7; } .bar-h1 { height: 10px; background: var(--ink); opacity: 0.85; } /* SaaS: product switcher */ .mock-order { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-white); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; } .mock-chip { font-style: normal; font-size: 8px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); border: 1px solid var(--gold-fine); border-radius: 999px; padding: 2px 7px; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .mock-chip.is-done, .mock-chip--ok { background: var(--gold); border-color: var(--gold); color: #fff; } .mock-total { margin-top: auto; text-align: center; font-size: 9px; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 7px; } /* Full-stack: code types, UI appears */ .mock-win__body.mock-code-split { display: grid; grid-template-columns: 1.05fr 0.95fr; padding: 0; } .mock-code { background: var(--ink); padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; } .code-line { display: block; height: 6px; width: var(--w, 60%); border-radius: 3px; background: rgba(255, 255, 255, 0.28); } .code-line--gold { background: var(--gold); opacity: 0.9; } .code-caret { width: 6px; height: 10px; background: var(--gold); animation: caret-blink 0.9s steps(2) infinite; } @keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .mock-preview { padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .prev-head { display: block; height: 10px; width: 78%; border-radius: 5px; background: var(--ink); opacity: 0.85; } .prev-btn { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--gold); color: #fff; border-radius: 999px; padding: 5px 12px; } .prev-bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; width: 60%; } .prev-bars i { flex: 1; height: var(--h, 50%); background: var(--gold-fine); border-radius: 3px 3px 0 0; } /* Websites: the page assembles itself */ .mock-site { display: flex; flex-direction: column; gap: 9px; height: 100%; } .site-nav { display: flex; align-items: center; gap: 6px; } .site-nav .dot-logo { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } .site-nav .bar-sm { height: 5px; } .site-hero { display: flex; flex-direction: column; gap: 7px; padding: 6px 0 2px; align-items: flex-start; } .site-secs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; } .site-secs i { border: 1px solid var(--line); border-radius: 8px; background: #faf8f1; } .mock-toast { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 7px; background: var(--ink); color: #fff; border-radius: 10px; padding: 7px 10px; box-shadow: var(--lift); } .mock-toast i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; } .mock-toast b { display: block; font-size: 9px; } .mock-toast span { font-size: 8px; opacity: 0.75; } /* Data: BI panel */ .mock-bi { display: flex; flex-direction: column; gap: 9px; height: 100%; } .bi-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bi-kpi { background: var(--gold); color: #fff; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .bi-kpi--line { background: var(--surface-white); color: var(--ink); border: 1px solid var(--gold-fine); } .bi-kpi small { font-size: 8px; opacity: 0.85; letter-spacing: 0.06em; text-transform: uppercase; } .bi-kpi strong { font-family: var(--display); font-size: 15px; line-height: 1.15; } .bi-bars { flex: 1; height: auto; } /* SEO: SERP climb + AI citation */ .serp-bar { border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font-size: 9px; color: var(--ink-soft); background: var(--surface-white); } .serp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .serp-res { display: flex; flex-direction: column; gap: 4px; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; } .serp-res--tv { border-color: var(--gold-fine); background: #faf8f1; position: relative; } .serp-res--tv b { font-size: 9.5px; font-weight: 600; } .serp-res--tv span { font-size: 8px; color: var(--gold-deep); } .serp-res--tv em { position: absolute; top: -7px; right: -6px; font-style: normal; font-size: 8px; font-weight: 700; background: var(--gold); color: #fff; border-radius: 999px; padding: 2px 6px; } .mock-ai { gap: 10px; } .ai-q { align-self: flex-end; background: var(--ink); color: #fff; border-radius: 12px 12px 4px 12px; padding: 6px 10px; font-size: 9px; max-width: 85%; } .ai-a { background: var(--surface-white); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; max-width: 92%; } .ai-src { align-self: flex-start; font-size: 8px; font-weight: 600; letter-spacing: 0.06em; color: var(--gold-deep); border: 1px solid var(--gold-fine); border-radius: 999px; padding: 2px 8px; margin-top: 2px; } /* bars grow from the floor when the reels animate them */ .mock-app__bars i, .prev-bars i { transform-origin: bottom center; } .svc-card__num { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); } .svc-scene h3 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 600; line-height: 1.15; margin-top: 10px; } .svc-scene h3 em { font-style: italic; color: var(--gold); } .svc-card__hook { font-family: var(--display); font-style: italic; font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--gold-deep); margin-top: 8px; } .svc-card__desc { margin-top: 14px; color: var(--ink-soft); max-width: 54ch; } .svc-card__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } /* BUJJI, narrating from the corner of the frame */ .tour-guide { position: absolute; left: 6px; bottom: 8px; z-index: 4; display: none; } .tour-bujji { position: relative; width: 76px; height: 76px; animation: bujji-bob 3s ease-in-out infinite; } .tour-bujji img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--gold); box-shadow: 0 14px 30px rgba(116, 91, 0, 0.25); background: #fff; } .tour-thrust { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); width: 3px; height: 20px; border-radius: 2px; background: linear-gradient(var(--gold-fine), transparent); animation: thrust-flicker 0.5s steps(2) infinite; } .tour-bubble { position: absolute; bottom: calc(100% + 14px); left: -10px; width: max-content; max-width: 300px; background: var(--surface-white); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; /* same voice as the chat widget */ box-shadow: var(--lift); padding: 11px 15px; font-size: 14px; line-height: 1.5; color: var(--ink); } .tour-bubble.pop { animation: bubble-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes bujji-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } } @keyframes thrust-flicker { 0%, 100% { opacity: 0.9; height: 20px; } 50% { opacity: 0.4; height: 14px; } } @keyframes bubble-pop { from { transform: scale(0.82); opacity: 0.4; } to { transform: scale(1); opacity: 1; } } .svc-progress { display: flex; align-items: center; gap: 16px; max-width: 340px; margin: 28px auto 0; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--gold-deep); } .svc-progress__bar { flex: 1; height: 2px; background: var(--line); overflow: hidden; } .svc-progress__bar i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; } /* Desktop: the contact sheet. The hero's filmstrip, stopped and laid flat — six frames on one lightbox, all readable at a glance. Clicking a frame promotes it to the full exhibit (GSAP Flip does the move, see main.js). */ @media (min-width: 900px) { .tour-guide { display: block; } .svc-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); align-items: start; } .svc-scene { position: relative; display: grid; grid-template-areas: "num" "title" "art"; align-content: start; gap: 10px; padding: 22px 22px 24px 30px; background: var(--surface-white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--lift); cursor: pointer; overflow: hidden; transition: box-shadow 0.35s ease, border-color 0.35s ease; } /* sprocket holes down the edge — the frame remembers which reel it came off */ .svc-scene::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: repeating-linear-gradient(to bottom, transparent 0 9px, var(--line) 9px 15px); opacity: 0.6; pointer-events: none; } .svc-scene:hover { box-shadow: var(--lift-hover); border-color: rgba(212, 175, 55, 0.55); } .svc-scene:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .svc-scene > .svc-card__num, .svc-scene > .label { grid-area: num; } .svc-scene > h3 { grid-area: title; font-size: clamp(1.15rem, 1.5vw, 1.5rem); } .svc-scene__art { grid-area: art; width: 100%; margin: 0; align-self: end; } /* Every frame on a contact sheet is the same size, so each thumbnail gets an identical window and the mock is scaled to sit inside it. The phone mock is 0.49 aspect against the windows' 1.32 — without this it is twice as tall as its neighbours and the grid stops reading as a sheet. */ .svc-scene:not(.is-open) .svc-scene__art { height: 240px; overflow: hidden; border-radius: 10px; /* flex, not grid: grid's justify-items would size these mocks to max-content and the phone shell, which relies on a full-width parent, collapses */ display: flex; align-items: center; justify-content: center; } .svc-scene:not(.is-open) .svc-scene__art > * { flex: 0 0 auto; width: 100%; transform: scale(var(--thumb-scale, 0.8)); transform-origin: center; } /* The phone is 0.49 aspect: shrunk to fit it becomes a sliver nobody can read. A contact sheet crops its frames, so this one keeps a readable width and is cropped from the top — you see the screen, not a thumbnail of a phone. */ .svc-scene:not(.is-open) .svc-scene__art--phone { align-items: flex-start; } .svc-scene:not(.is-open) .svc-scene__art--phone > * { width: 200px; --thumb-scale: 1; transform-origin: top center; } /* collapsed frames are a title and a thumbnail — nothing else competes */ .svc-scene .svc-card__hook, .svc-scene .svc-card__desc, .svc-scene .svc-card__ctas { display: none; } /* Promoted: the frame takes the whole sheet and becomes the exhibit. It also moves to the head of the grid — a full-width cell in the middle of the sheet strands the frames before it alone in a half-empty row. */ .svc-scene.is-open { order: -1; grid-column: 1 / -1; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-areas: "art num" "art title" "art desc" "art ctas"; column-gap: clamp(40px, 6vw, 96px); align-content: center; padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) clamp(40px, 4vw, 60px); cursor: default; border-color: rgba(212, 175, 55, 0.55); } .svc-scene.is-open > h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); } .svc-scene.is-open > .svc-card__desc { display: block; grid-area: desc; } .svc-scene.is-open > .svc-card__ctas { display: flex; grid-area: ctas; align-self: start; } .svc-scene.is-open .svc-scene__art { align-self: center; width: min(340px, 30vw); margin-inline: auto; } .svc-scene.is-open .svc-scene__art--phone { width: min(220px, 22vw); } /* the closing frame is a statement, not a thumbnail */ .svc-scene--end { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "title" "hook" "desc" "ctas"; max-width: 640px; margin-inline: auto; cursor: default; text-align: center; padding: clamp(28px, 3vw, 44px); } .svc-scene--end::before { display: none; } .svc-scene--end:hover { box-shadow: var(--lift); border-color: var(--line); } .svc-scene--end .svc-card__hook, .svc-scene--end .svc-card__desc { display: block; } .svc-scene--end .svc-card__ctas { display: flex; justify-content: center; } /* the sheet needs no progress counter — every frame is already in view */ .svc-progress { display: none; } } /* reduced motion: no Flip, no promotion — every frame opens flat and stays open */ @media (min-width: 900px) and (prefers-reduced-motion: reduce) { .svc-stage { grid-template-columns: minmax(0, 1fr); } .svc-scene { cursor: default; grid-column: 1 / -1; } .svc-scene .svc-card__hook, .svc-scene .svc-card__desc { display: block; } .svc-scene .svc-card__ctas { display: flex; } .tour-guide { display: none; } } /* Mobile: the reel unrolls vertically; the hook becomes BUJJI's chat bubble */ @media (max-width: 899px) { .svc-scene { display: flex; flex-direction: column; margin-bottom: 44px; padding-bottom: 40px; border-bottom: 1px solid rgba(212, 175, 55, 0.35); /* chunking: one thought per scene */ } .svc-scene:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* reading order: kicker → headline → BUJJI's pitch → visual → detail → action */ .svc-scene__art { width: min(210px, 56vw); margin: 20px auto 4px; order: 3; } .svc-scene__art--phone { width: min(185px, 50vw); } .svc-scene__art--win { width: min(280px, 78vw); } .svc-scene__art::after { display: none; } .svc-card__desc { order: 4; } .svc-card__ctas { order: 5; flex-direction: column; gap: 10px; margin-top: 22px; } .svc-card__ctas .btn { width: 100%; text-align: center; justify-content: center; } .svc-scene .svc-card__hook { position: relative; margin-top: 16px; padding: 12px 16px 12px 56px; background: var(--surface-white); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; /* the widget's voice */ box-shadow: var(--lift); color: var(--ink); font-size: 1rem; } .svc-scene .svc-card__hook::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: #fff url("../images/bujji-face.jpg") center / cover; border: 1.5px solid var(--gold); } .tour-guide, .svc-progress { display: none; } } /* Blueprint stroke language */ .d-main { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .d-fine { fill: none; stroke: var(--gold-fine); stroke-width: 0.7; opacity: 0.55; stroke-linecap: round; } /* ============ The Vincis Collective (allied studios) ============ */ .collective { padding: clamp(48px, 6vw, 88px) 0; overflow: hidden; } /* The duet: two working machines — the artist's arm draws, the watchtower scans */ .duet { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 36px); max-width: 1400px; margin: 0 auto; } .duet__panel { margin: 0; background: var(--surface-white); border: 1px solid var(--line); border-top: 2px solid var(--gold-fine); border-radius: var(--radius-lg); box-shadow: var(--lift); padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 28px) clamp(16px, 2vw, 26px); text-align: center; } .duet__label { display: block; margin-bottom: 6px; } .duet__svg { display: block; width: 100%; height: auto; } /* the machines ink with the hero's conviction */ .duet .d-main { stroke-width: 2; } .duet .d-fine { opacity: 0.75; stroke-width: 0.9; } .duet__caption { font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 1.9vw, 1.55rem); color: var(--ink); margin-top: 4px; } .duet__caption em { color: var(--gold); } .duet__note { margin: clamp(14px, 2vw, 22px) auto clamp(32px, 4.5vw, 64px); text-align: center; font-family: var(--display); font-style: italic; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--ink-soft); } .duet__note em { color: var(--gold); } @media (max-width: 900px) { .duet { grid-template-columns: 1fr; } } .ally-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 36px); align-items: stretch; } .ally { position: relative; display: flex; flex-direction: column; background: var(--surface-white); border: 0.5px solid rgba(212, 175, 55, 0.35); border-radius: var(--radius-lg); box-shadow: var(--lift); padding: clamp(28px, 3vw, 44px); overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; } .ally:hover { transform: translateY(-6px); box-shadow: var(--lift-hover); } /* metallic sheen — the "featured card" 2px gold top border from DESIGN.md */ .ally::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--gold-fine), var(--gold), var(--gold-fine)); } .ally__content { display: flex; flex-direction: column; align-items: flex-start; flex: 1; } .ally__badge { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; } .ally__name { font-family: var(--display); font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; } .ally__name em { font-style: italic; color: var(--gold); } .ally__hook { font-family: var(--display); font-style: italic; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--gold-deep); margin-top: 10px; } .ally__hook em { color: var(--gold); } .ally__desc { color: var(--ink-soft); font-size: 15.5px; max-width: 560px; margin: 20px 0 26px; } .ally__desc em { font-style: italic; color: var(--gold-deep); } .ally__stats { display: flex; flex-wrap: wrap; gap: clamp(18px, 2vw, 32px); margin-bottom: 26px; } .ally-stat { border-left: 0.5px solid var(--gold-fine); padding-left: 14px; max-width: 150px; } .ally-stat__num { display: block; font-family: var(--display); font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 700; line-height: 1.1; color: var(--gold); } .ally-stat__label { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); } .ally .chips span { box-shadow: inset 0 0 0 0.5px var(--line); } .ally__trust { margin-top: auto; padding-top: 22px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); border-top: 0.5px solid var(--line); width: 100%; } .ally__trust b { color: var(--ink); font-weight: 700; } .ally .chips { margin-bottom: 24px; } @media (max-width: 1100px) { .ally-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .ally { padding: 28px 22px; } } /* ============ Portfolio Blade (dark) ============ */ .blade { background: var(--charcoal); color: var(--on-dark); position: relative; } .blade__pin { min-height: 100svh; display: flex; align-items: center; padding: clamp(56px, 7vw, 96px) 0; overflow: hidden; } .blade__layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(48px, 6vw, 96px); align-items: center; width: 100%; } .blade__title { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin-top: 20px; color: #ffffff; } .blade__desc { margin-top: 28px; max-width: 480px; color: var(--on-dark-dim); font-size: 17px; } .blade__features { margin: 32px 0 40px; display: grid; gap: 14px; } .blade__features li { position: relative; padding-left: 28px; font-size: 15px; color: var(--on-dark); } .blade__features li::before { content: "✦"; position: absolute; left: 0; color: var(--gold-fine); font-size: 12px; top: 3px; } .blade__visual { position: relative; display: flex; justify-content: center; will-change: transform; } /* Phone mockup */ .phone { width: min(300px, 72vw); aspect-ratio: 9 / 18.6; background: #0d0d0d; border-radius: 42px; padding: 12px; box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 40px 80px rgba(0, 0, 0, 0.5); position: relative; z-index: 2; } .phone__notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 88px; height: 22px; background: #0d0d0d; border-radius: 12px; z-index: 3; } .phone__screen { width: 100%; height: 100%; background: var(--surface); border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; padding: 52px 14px 14px; gap: 10px; color: var(--ink); } .phone__header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 8px; border-bottom: 0.5px solid var(--line); } .phone__brand { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; } .phone__brand em { display: block; font-family: var(--sans); font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin-top: 2px; } .phone__table { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-tint); padding: 3px 8px; border-radius: 9999px; } .phone__item { display: flex; align-items: center; gap: 10px; background: var(--surface-white); border-radius: 12px; padding: 10px; box-shadow: var(--lift); } .phone__thumb { width: 38px; height: 38px; display: grid; place-items: center; font-size: 19px; background: var(--surface); border-radius: 10px; flex-shrink: 0; } .phone__item div { flex: 1; min-width: 0; } .phone__item b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phone__item i { font-style: normal; font-size: 11px; color: var(--gold-deep); font-weight: 600; } .phone__item button { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--gold-fine), var(--gold)); color: #fff; font-weight: 700; flex-shrink: 0; } .phone__cart { margin-top: auto; background: var(--charcoal); color: #fff; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 13px; border-radius: 12px; } .blade__qr { position: absolute; bottom: 8%; left: 50%; transform: translateX(-140%); width: 108px; text-align: center; z-index: 3; } .blade__qr svg { width: 100%; border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.4); } .blade__qr span { display: block; margin-top: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-dim); } /* ============ Stats ============ */ .stats { padding: clamp(44px, 5.5vw, 72px) 0; background: var(--surface-white); border-bottom: 0.5px solid var(--line); } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } .stat { text-align: left; padding-right: 24px; border-right: 0.5px solid var(--line); } .stat:last-child { border-right: none; } .stat__num { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 700; color: var(--gold); line-height: 1; display: block; } .stat__label { display: block; margin-top: 14px; font-size: 13px; color: var(--ink-soft); max-width: 220px; } /* ============ Founder ============ */ .founder { padding: clamp(48px, 6vw, 88px) 0; } .founder__layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(48px, 7vw, 110px); align-items: center; } .founder__media { position: relative; } .founder__frame { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4rem; overflow: hidden; box-shadow: var(--lift-hover); border: 0.5px solid var(--outline-variant, #d0c5af); } .founder__frame img { width: 100%; height: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 60% 20%; will-change: transform; } .founder__plate { position: absolute; bottom: -28px; right: -20px; padding: 20px 28px; display: grid; gap: 6px; overflow: hidden; /* clips the gold bar to the rounded corners */ } .founder__plate::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold-fine), var(--gold)); } .founder__plate strong { font-family: var(--display); font-size: 1.35rem; font-weight: 700; } .founder__bio { display: grid; gap: 20px; margin-top: 32px; } .founder__bio p { color: var(--ink-soft); font-size: 16px; } .founder__bio p:first-child { color: var(--ink); font-size: 17px; } .founder__chips { margin-top: 32px; } .founder__chips span { background: var(--surface-white); box-shadow: inset 0 0 0 0.5px var(--line); } /* ============ FAQ ============ */ .faq { background: var(--surface-white); padding: clamp(48px, 6vw, 88px) 0; border-block: 0.5px solid var(--line); } .faq__list { display: grid; gap: 16px; } .faq__item { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow 0.3s ease; } .faq__item[open] { box-shadow: var(--lift-hover); background: var(--surface-white); } .faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 40px; cursor: pointer; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; } .faq__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: var(--gold); transition: transform 0.3s ease; } .faq__icon::after { transform: rotate(90deg); } .faq__item[open] .faq__icon::after { transform: rotate(0deg); } .faq__answer { padding: 0 40px; overflow: hidden; } .faq__answer p { color: var(--ink-soft); padding-bottom: 32px; max-width: 720px; } /* ============ Contact ============ */ .contact { background: var(--charcoal); color: var(--on-dark); padding: clamp(56px, 7vw, 100px) 0; position: relative; overflow: hidden; } .contact::before { content: ""; position: absolute; top: -30%; right: -12%; width: 640px; height: 640px; border-radius: 50%; border: 0.5px solid rgba(212, 175, 55, 0.25); pointer-events: none; } .contact__layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(48px, 7vw, 110px); align-items: start; position: relative; z-index: 2; } .contact__title { font-family: var(--display); font-size: clamp(2.4rem, 5.4vw, 4.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: #ffffff; margin-top: 20px; } .contact__sub { margin-top: 28px; max-width: 440px; color: var(--on-dark-dim); } .contact__email { display: inline-block; margin-top: 36px; font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--gold-fine); border-bottom: 0.5px solid rgba(212, 175, 55, 0.5); padding-bottom: 4px; transition: color 0.3s ease; } .contact__email:hover { color: var(--gold-tint); } .contact__form { padding: clamp(32px, 4vw, 56px); display: grid; gap: 24px; color: var(--ink); } .field { display: grid; gap: 10px; } .field label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .field input, .field select, .field textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: none; border-bottom: 1.5px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; padding: 14px 16px; outline: none; transition: border-color 0.25s ease, background 0.25s ease; width: 100%; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); background: var(--surface-white); box-shadow: var(--lift); } .contact__note { font-size: 13px; color: var(--gold-deep); min-height: 1em; text-align: center; } /* ============ Footer ============ */ .footer { background: var(--surface); padding: 48px 0 36px; } .footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: start; } .footer__brand p { margin-top: 10px; font-family: var(--display); font-style: italic; color: var(--ink-soft); font-size: 0.95rem; } .footer__nav { display: flex; gap: 28px; flex-wrap: wrap; } .footer__nav a { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.25s ease; } .footer__nav a:hover { color: var(--gold-deep); } .footer__meta { display: grid; gap: 8px; justify-items: end; font-size: 13px; color: var(--ink-soft); } .footer__meta a { color: var(--gold-deep); } .footer__cities { grid-column: 1 / -1; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); } .footer__cities a { color: var(--gold-deep); } .footer__cities a:hover { color: var(--gold); } /* ============ Responsive ============ */ /* Below this the five links no longer fit inside the pill beside the wordmark, so they fold into the overlay menu and the pill keeps the reference's wordmark-plus-hamburger shape. */ @media (max-width: 1199px) { .nav__links { display: none; } .nav__toggle { display: flex; } .nav__tag { display: none; } .nav__inner { padding: 8px 8px 8px 20px; gap: 14px; max-width: calc(100% - 96px); } } @media (max-width: 1100px) { .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; } .stat:nth-child(2) { border-right: none; } } @media (max-width: 900px) { :root { --margin: 18px; } .phero { padding-top: calc(72px + 20px); } .nav { padding: 10px var(--margin); } .nav__mark { font-size: 1.25rem; } .blade__layout, .founder__layout, .contact__layout, .manifesto__layout { grid-template-columns: 1fr; } /* mobile: story cards become a fixed list — no sticky stacking */ .story-card { grid-template-columns: 1fr; min-height: 0; position: static; } .story-card__art svg { max-width: 240px; } /* stacked under the copy, the rectangle shares the section's left edge instead of floating centred in its own column */ .manifesto__visual { margin-top: 16px; justify-content: start; } .manifesto__sketchwrap { justify-items: start; } .manifesto__sketch { width: min(340px, 82vw); } .blade__pin { min-height: 0; } .blade__visual { margin-top: 24px; } .blade__qr { left: auto; right: 0; transform: none; } .founder__media { max-width: 480px; } .founder__plate { right: 0; } .footer__inner { grid-template-columns: 1fr; } .footer__meta { justify-items: start; } .hero__scrollhint { display: none; } /* Phone: the helix keeps the upper half and the copy owns the lower half over near-solid black, so no headline ever sits on top of the linework. The sequence is anchored high to match — see anchorY in js/hero-sequence.js. */ .hero { align-items: flex-end; padding-top: 104px; padding-bottom: clamp(72px, 14vh, 132px); } .hero__scrim { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.1) 14%, rgba(0, 0, 0, 0.1) 26%, rgba(0, 0, 0, 0.88) 36%, #000 46% ); } /* the desktop cap exists to dodge the helix's bright right side; on a phone the helix is above the copy instead, so the headline gets the full width */ .hero__title { max-width: none; } .hero__label { margin-bottom: 16px; } .hero__sub { margin-top: 20px; font-size: 16px; } .hero__ctas { margin-top: 28px; gap: 12px; } .hero__ctas .btn { padding: 15px 24px; font-size: 12px; } } @media (max-width: 640px) { .stats__grid { grid-template-columns: 1fr 1fr; } .stat { border-right: none; } .story-card { padding: 28px 22px; } .faq__item summary { padding: 24px 24px; } .faq__answer { padding: 0 24px; } } /* ============ Product / service subpages ============ */ .crumbs { display: flex; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 24px; } .crumbs a { color: var(--gold-deep); } .crumbs span[aria-hidden] { color: var(--line); } .phero { padding: calc(84px + clamp(28px, 4vw, 56px)) 0 clamp(40px, 5vw, 72px); } .phero__layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 100px); align-items: center; } .phero__title { font-family: var(--display); font-size: clamp(2.4rem, 5.6vw, 4.8rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; } .phero__title em { font-style: italic; color: var(--gold); } .phero__answer { margin-top: 26px; max-width: 560px; font-size: 17px; line-height: 1.65; color: var(--ink-soft); } .phero__note { margin-top: 22px; font-family: var(--display); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); } .phero__visual { display: flex; justify-content: center; } .phero__doodle { width: min(440px, 76vw); overflow: visible; } .phero__doodle [pathLength] { stroke-dasharray: 1; } .psection { padding: clamp(40px, 5vw, 72px) 0; } .psection--alt { background: var(--surface-white); border-block: 0.5px solid var(--line); } .psection__answer { margin-top: 20px; max-width: 780px; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); } .psection__answer a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-fine); } .deft { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; margin-top: 40px; padding-top: 28px; border-top: 0.5px solid var(--line); } .deft + .psection__answer { margin-top: 12px; } .psection__footnote { margin-top: 16px; font-family: var(--display); font-style: italic; font-size: 0.98rem; color: var(--ink-soft); } .psection .chips { margin-top: 28px; } .psection .chips span { background: var(--surface-white); box-shadow: inset 0 0 0 0.5px var(--line); } .psection--alt .chips span { background: var(--surface); } /* numbered how-it-works list (real
    for list snippets) */ .howlist { margin-top: 36px; list-style: none; counter-reset: how; display: grid; gap: 0; } .howlist li { counter-increment: how; position: relative; padding: 22px 0 22px 72px; border-bottom: 0.5px solid var(--line); font-size: 16px; color: var(--ink-soft); max-width: 760px; } .howlist li:first-child { border-top: 0.5px solid var(--line); } .howlist li b { color: var(--ink); font-weight: 700; } .howlist li::before { content: "0" counter(how); position: absolute; left: 0; top: 24px; font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--gold); } /* feature grid */ .featgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } .feat { padding: 36px 32px; background: var(--surface); } .feat h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; } .feat p { font-size: 14.5px; color: var(--ink-soft); } /* editorial tables (pricing + comparison) */ .tblwrap { overflow-x: auto; margin-top: 32px; border-radius: var(--radius-lg); box-shadow: var(--lift); } .ptbl { width: 100%; border-collapse: collapse; background: var(--surface-white); font-size: 14.5px; min-width: 560px; } .ptbl th { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: var(--ink); padding: 18px 20px; border-bottom: 1.5px solid var(--gold-fine); background: var(--surface); } .ptbl th span { display: block; font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--gold-deep); margin-top: 4px; } .ptbl td { padding: 15px 20px; border-bottom: 0.5px solid var(--line); color: var(--ink-soft); vertical-align: top; } .ptbl td:first-child { color: var(--ink); font-weight: 500; } .ptbl tr:last-child td { border-bottom: none; } .ptbl__cta { margin-top: 32px; } /* ============ Interactive structures (built by page.js) ============ */ /* --- Card-throw stack --- */ .stack { margin-top: 28px; max-width: 880px; } .stack__deck { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; } .stack__deck.is-grabbing { cursor: grabbing; } .stackcard { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: auto 1fr; gap: 18px; background: var(--surface-white); border: 0.5px solid rgba(212, 175, 55, 0.45); border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 34px); box-shadow: var(--lift-hover); will-change: transform; } .stackcard__num { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--gold); line-height: 1; } .stackcard div { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; } .stackcard b { color: var(--ink); font-weight: 700; } .stack__meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; } .stack__count { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--gold-deep); } .stack__hint { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } /* Small screens: the deck becomes a fixed, fully-visible card list */ .stack--static { max-width: none; } .stack--static .stack__deck { height: auto !important; display: grid; gap: 14px; cursor: default; } .stack--static .stackcard { position: static; } .stack--static .stack__meta { display: none; } /* --- Versus battle --- */ .versus { margin-top: 28px; } .versus__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 2vw, 24px); margin-bottom: 22px; } .versus__fighter { position: relative; background: var(--surface-white); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--lift); } .versus__crown { position: absolute; top: -14px; right: 12px; font-size: 18px; } .versus__badge { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-fine), var(--gold)); color: #fff; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.05rem; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(197, 160, 40, 0.4); } .versus__rounds { display: grid; gap: 12px; } .versus__round { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(10px, 1.6vw, 20px); } .versus__cell { background: var(--surface-white); border: 0.5px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; } .versus__cell.is-win { border-color: rgba(212, 175, 55, 0.55); background: #fffdf4; color: var(--ink); position: relative; padding-left: 34px; } .versus__cell.is-win::before { content: "✓"; position: absolute; left: 12px; color: var(--gold); font-weight: 800; } .versus__label { align-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-tint); padding: 6px 12px; border-radius: 9999px; white-space: nowrap; } .versus__score { display: flex; justify-content: center; align-items: baseline; gap: 20px; margin-top: 26px; } .versus__num { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--gold-deep); } .versus__score i { font-family: var(--display); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); } /* --- Journey path --- */ .journey { margin-top: 28px; display: grid; } .journey__steps { display: grid; min-width: 0; } .journey__art { display: none; } @media (min-width: 1100px) { .journey--art { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: clamp(28px, 3.5vw, 64px); align-items: start; } .journey__art { display: block; position: sticky; top: 110px; } } .journey__artstage { position: relative; aspect-ratio: 4 / 3; background: var(--surface-white); border: 0.5px solid rgba(212, 175, 55, 0.4); border-radius: var(--radius-lg); box-shadow: var(--lift); overflow: hidden; } .journey__artstage svg { position: absolute; inset: 8%; width: 84%; height: 84%; } .journey__artstage [pathLength] { stroke-dasharray: 1; } .journey__artnum { position: absolute; right: 18px; bottom: 6px; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 4.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--gold-fine); opacity: 0.6; pointer-events: none; } .journey__step { display: grid; grid-template-columns: 90px 1fr; gap: clamp(8px, 1.5vw, 20px); padding-bottom: clamp(28px, 3.5vw, 48px); } .journey__step:last-child { padding-bottom: 0; } .journey__rail { position: relative; } .journey__node { position: relative; z-index: 2; width: 34px; height: 34px; margin-inline: auto; border-radius: 50%; background: linear-gradient(135deg, var(--gold-fine), var(--gold)); color: #fff; font-family: var(--display); font-style: italic; font-weight: 700; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(197, 160, 40, 0.35); } .journey__rail svg { position: absolute; inset: 0; width: 100%; height: calc(100% + clamp(28px, 3.5vw, 48px)); overflow: visible; } .journey__rail path { fill: none; stroke: var(--gold-fine); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; opacity: 0.75; } .journey__step > * { min-width: 0; } .versus__round > * { min-width: 0; } .journey__card { background: var(--surface-white); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: clamp(18px, 2.2vw, 28px); box-shadow: var(--lift); font-size: 15px; color: var(--ink-soft); line-height: 1.6; max-width: 680px; } .journey__card b { color: var(--ink); font-weight: 700; } @media (max-width: 640px) { /* scoreboard layout: fighters stay pinned above side-by-side round cells */ .versus__head { position: sticky; top: 62px; z-index: 5; background: var(--surface); border-radius: 14px; padding: 8px; gap: 8px; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.22); } .versus__fighter { font-size: 10px; letter-spacing: 0.05em; padding: 10px 6px; } .versus__crown { top: -10px; right: 4px; font-size: 14px; } .versus__badge { width: 36px; height: 36px; font-size: 0.8rem; box-shadow: 0 6px 14px rgba(197, 160, 40, 0.35); } .versus__round { grid-template-columns: 1fr 1fr; grid-template-areas: "label label" "left right"; gap: 8px; } .versus__label { grid-area: label; justify-self: start; } .versus__round > .versus__cell:first-child { grid-area: left; } .versus__round > .versus__cell:last-child { grid-area: right; } .versus__cell { font-size: 12.5px; line-height: 1.45; padding: 10px 12px; align-items: flex-start; } .versus__cell.is-win { padding-left: 26px; } .versus__cell.is-win::before { left: 8px; top: 12px; } .journey__step { grid-template-columns: 56px 1fr; } } /* ============ Cinematic set-piece scenes (service pages) ============ */ .scene { background: var(--surface-white); border-block: 0.5px solid var(--line); overflow: hidden; } .scene__pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 44px); padding: clamp(40px, 5vh, 64px) 0; } .scene__head .section-title { margin-top: 12px; } @media (max-width: 899px) { .scene__pin { min-height: 0; padding: clamp(48px, 8vw, 72px) 0; } } /* --- Scene 1: code → design morph --- */ .codemorph { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: stretch; } .codemorph__code { background: var(--charcoal); border-radius: var(--radius-lg); padding: 0 0 22px; box-shadow: var(--lift-hover); overflow: hidden; } .codemorph__chrome { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 16px; } .codemorph__chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); } .codemorph__chrome i:first-child { background: rgba(212, 175, 55, 0.65); } .codemorph__chrome span { margin-left: auto; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(241, 241, 241, 0.4); } .codemorph__code pre { margin: 0; padding: 0 22px; } .codemorph__code code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: clamp(11px, 1.05vw, 14px); line-height: 2.1; color: #e8dcb8; } .cl { display: block; overflow: hidden; white-space: pre; width: 0; border-right: 1px solid transparent; } .codemorph__stage { display: flex; align-items: center; } .mini { width: 100%; background: var(--surface); border: 0.5px solid rgba(212, 175, 55, 0.4); border-radius: var(--radius-lg); padding: clamp(18px, 2vw, 30px); display: grid; gap: clamp(12px, 1.6vw, 20px); position: relative; box-shadow: var(--lift); } .mini__nav { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 0.5px solid var(--line); } .mini__nav b { font-family: var(--display); font-size: clamp(0.9rem, 1.2vw, 1.1rem); margin-right: auto; } .mini__nav span { width: 26px; height: 4px; border-radius: 4px; background: var(--line); } .mini__title { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1.1; } .mini__title em { font-style: italic; } .mini__btn { justify-self: start; background: linear-gradient(135deg, var(--gold-fine), var(--gold)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 22px; border-radius: var(--radius); } .mini__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mini__cards div { background: var(--surface-white); border-radius: 10px; padding: 12px 8px; text-align: center; font-size: 11px; color: var(--gold); letter-spacing: 0.1em; box-shadow: var(--lift); } .mini__live { position: absolute; top: -12px; right: 18px; background: var(--charcoal); color: #9be3b4; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; padding: 6px 12px; border-radius: 9999px; } /* --- Scene 2: living dashboard --- */ .dash { display: grid; gap: var(--gutter); grid-template-columns: 1.2fr 0.8fr; grid-template-areas: "kpis kpis" "panel bars"; } .dash__kpis { grid-area: kpis; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } .dash__kpi { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(14px, 1.6vw, 24px); box-shadow: var(--lift); display: grid; gap: 6px; } .dash__kpi span { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); } .dash__kpi b { font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 700; color: var(--gold-deep); } .dash__panel { grid-area: panel; background: var(--surface); border-radius: var(--radius-lg); padding: clamp(16px, 1.8vw, 26px); box-shadow: var(--lift); } .dash__paneltitle { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; display: flex; justify-content: space-between; } .dash__paneltitle i { font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-soft); } .dash__panel svg { width: 100%; display: block; } .dash__grid { stroke: var(--line); stroke-width: 0.6; } .dash__area { fill: rgba(197, 160, 40, 0.14); } .dash__line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; } .dash__dot { fill: var(--gold-deep); } .dash__bars { grid-area: bars; display: grid; gap: 12px; align-content: center; } .dash__bar { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; font-size: 12.5px; } .dash__bar span { color: var(--ink-soft); font-weight: 600; } .dash__bar b { font-weight: 700; } .dash__track { height: 9px; background: var(--surface); border-radius: 9999px; overflow: hidden; box-shadow: inset 0 0 0 0.5px var(--line); } .dash__track i { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--gold-fine), var(--gold)); } /* --- Scene 3: search theater --- */ .serpstage { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 3.5vw, 56px); align-items: center; } .serpbox { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(16px, 2vw, 28px); box-shadow: var(--lift-hover); } .serpbox__bar { display: flex; align-items: center; gap: 10px; background: var(--surface-white); border: 0.5px solid var(--line); border-radius: 9999px; padding: 11px 18px; margin-bottom: 18px; color: var(--ink-soft); } .serpbox__bar svg { width: 15px; height: 15px; flex-shrink: 0; } .serpbox__q { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; } .serpbox__caret { width: 1.5px; height: 15px; background: var(--gold); animation: caretblink 1s steps(1) infinite; } @keyframes caretblink { 50% { opacity: 0; } } .serpbox__results { display: grid; gap: 10px; } .serp-r { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-white); border: 0.5px solid var(--line); border-radius: 12px; padding: 12px 14px; } .serp-r--you { border-color: rgba(212, 175, 55, 0.5); background: #fffdf4; } .serp-pos { position: relative; min-width: 26px; height: 24px; border-radius: 7px; background: var(--surface); font-family: var(--display); font-style: italic; font-size: 12px; color: var(--ink-soft); display: grid; place-items: center; } .serp-r--you .serp-pos { background: linear-gradient(135deg, var(--gold-fine), var(--gold)); color: #fff; } .serp-pos u, .serp-pos s { text-decoration: none; position: absolute; inset: 0; display: grid; place-items: center; } .serp-r i { display: block; font-style: normal; font-size: 10.5px; color: var(--gold-deep); font-family: ui-monospace, Consolas, monospace; } .serp-r b { font-size: 13px; font-weight: 600; line-height: 1.35; } .aichat { display: grid; gap: 14px; } .aichat__bubble { border-radius: 16px; padding: 14px 18px; font-size: 14px; line-height: 1.55; max-width: 92%; } .aichat__bubble--q { justify-self: end; background: var(--charcoal); color: var(--on-dark); border-bottom-right-radius: 4px; } .aichat__bubble--a { justify-self: start; background: var(--surface); box-shadow: var(--lift); border-bottom-left-radius: 4px; color: var(--ink-soft); } .aichat__cite { color: var(--gold-deep); background: linear-gradient(90deg, var(--gold-fine), var(--gold)) no-repeat left bottom; background-size: 0% 2px; padding-bottom: 2px; } .aichat__src { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--gold-deep); background: var(--gold-tint); padding: 4px 10px; border-radius: 9999px; } @media (max-width: 899px) { .codemorph, .serpstage { grid-template-columns: 1fr; } .dash { grid-template-columns: 1fr; grid-template-areas: "kpis" "panel" "bars"; } .dash__kpis { grid-template-columns: 1fr 1fr; } } /* Launch status tag */ .launchtag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-tint); padding: 7px 14px; border-radius: 9999px; margin-bottom: 22px; } .launchtag span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: launchpulse 1.8s ease-in-out infinite; } @keyframes launchpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } } /* Iyra app UI recreation (inside .phone frame) */ .iyra-ui { gap: 8px; padding: 46px 12px 10px; } .iyra-ui__head { padding: 0 4px; } .iyra-ui__head span { display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .iyra-ui__head b { font-size: 15px; font-weight: 800; } .iyra-ui__spent { background: linear-gradient(135deg, var(--gold), var(--gold-deep) 160%); border-radius: 14px; padding: 12px 14px; color: #fff; display: grid; gap: 3px; } .iyra-ui__spent span { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; } .iyra-ui__spent b { font-size: 22px; font-weight: 800; line-height: 1.1; } .iyra-ui__spent i { font-style: normal; font-size: 10px; opacity: 0.85; } .iyra-ui__bar { height: 5px; background: rgba(255, 255, 255, 0.35); border-radius: 9999px; margin: 4px 0 2px; overflow: hidden; } .iyra-ui__bar div { width: 45%; height: 100%; background: #fff; border-radius: 9999px; } .iyra-ui__spent em { font-style: normal; font-size: 10px; font-weight: 700; } .iyra-ui__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .iyra-ui__tiles > div { background: var(--surface-white); border-radius: 11px; padding: 9px 11px; box-shadow: var(--lift); display: grid; gap: 2px; } .iyra-ui__tiles span { font-size: 9px; color: var(--ink-soft); font-weight: 600; } .iyra-ui__tiles b { font-size: 13.5px; font-weight: 800; } .iyra-ui__tiles .t-pos { color: #3d6b4f; } .iyra-ui__tiles .t-gold { color: var(--gold-deep); } .iyra-ui__nav { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 2px; border-top: 0.5px solid var(--line); } .iyra-ui__nav span { font-size: 8.5px; font-weight: 600; color: var(--ink-soft); } .iyra-ui__nav .on { color: var(--gold-deep); font-weight: 800; } .iyra-ui__fab { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-fine), var(--gold)); color: #fff !important; font-size: 16px !important; font-weight: 700 !important; display: grid; place-items: center; margin-top: -18px; box-shadow: 0 8px 18px rgba(197, 160, 40, 0.45); } /* App screenshot gallery */ .shotgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } .shot { margin: 0; display: grid; gap: 14px; justify-items: center; } .shot img { width: 100%; border-radius: 22px; border: 0.5px solid rgba(212, 175, 55, 0.45); box-shadow: var(--lift-hover); } .shot figcaption { font-family: var(--display); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); text-align: center; } @media (max-width: 900px) { .shotgrid { grid-template-columns: 1fr 1fr; } } /* CTA variant on dark contact section */ .contact__cta-narrow { max-width: 820px; text-align: left; position: relative; z-index: 2; } .contact__cta-narrow .hero__ctas { margin-top: 36px; } .btn--ghost-light { border-color: rgba(212, 175, 55, 0.6); color: var(--gold-fine); } .btn--ghost-light:hover { background: rgba(212, 175, 55, 0.1); } @media (max-width: 900px) { .phero__layout { grid-template-columns: 1fr; } .featgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .featgrid { grid-template-columns: 1fr; } .howlist li { padding-left: 52px; } } /* ============ Reduced motion ============ */ @media (prefers-reduced-motion: reduce) { .hero__scrolldot { animation: none; opacity: 0.7; } *, *::before, *::after { transition-duration: 0.01ms !important; } .cl { width: auto; } /* show finished code panel instead of typing it */ .serpbox__caret { animation: none; } } /* ============ Flappy BUJJI — the hidden arcade ============ */ .flap { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(26, 26, 26, 0.45); backdrop-filter: blur(3px); padding: clamp(8px, 3vw, 40px); } .flap.is-open { display: grid; place-items: center; } .flap__frame { position: relative; width: min(860px, 100%); height: min(560px, 100%); background: #f9f9f9; border: 2px solid var(--gold-fine); border-radius: var(--radius-lg, 18px); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35); overflow: hidden; } .flap__canvas { display: block; width: 100%; height: 100%; } .flap__hint { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); font-size: 13px; letter-spacing: 0.06em; color: var(--gold-deep); pointer-events: none; } .flap__close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-white); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; } .flap__close:hover { border-color: var(--gold); color: var(--gold-deep); } .flap__card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100% - 40px)); background: var(--surface-white); border: 1px solid var(--line); border-top: 2px solid var(--gold-fine); border-radius: var(--radius-lg, 18px); box-shadow: var(--lift); padding: 26px 26px 24px; text-align: left; } .flap__card h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 600; line-height: 1.15; margin-top: 8px; } .flap__quip { margin-top: 10px; color: var(--ink-soft); } .flap__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .tour-guide { cursor: pointer; } /* the narrator knows a game */ /* ============ The arcade strip: play in the open, win a code ============ */ .game-strip { background: #faf8f1; border-block: 1px solid var(--line); padding: 30px 0; } .game-strip__inner { display: flex; align-items: center; gap: 22px; } .game-strip__face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--gold); box-shadow: 0 10px 24px rgba(116, 91, 0, 0.22); background: #fff; animation: bujji-bob 3s ease-in-out infinite; flex: none; } .game-strip__copy { flex: 1; } .game-strip__copy h2 { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.2; } .game-strip__copy p { margin-top: 4px; color: var(--ink-soft); font-size: 0.95rem; } .game-strip__copy p em { font-style: italic; color: var(--gold-deep); font-weight: 600; } @media (max-width: 899px) { .game-strip__inner { flex-direction: column; text-align: center; } .game-strip .btn { width: 100%; justify-content: center; text-align: center; } } /* the reward, revealed on the flight report */ .flap__offer { margin-top: 16px; border: 1.5px dashed var(--gold-fine); border-radius: 12px; padding: 12px 16px; background: #faf8f1; } .flap__offer span { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); } .flap__offer b { display: block; font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.08em; color: var(--gold-deep); margin-top: 2px; } .flap__offer p { margin-top: 4px; font-size: 0.85rem; color: var(--ink-soft); }