/* ============================================================ TNR PALETTE OVERRIDE — site-wide. Source aesthetic: trucknroll.com fingerprint. Loaded LAST in so it wins on cascade. Preserves all video, markup, and JS. ============================================================ */ :root { --tnr-bg: var(--c-bg); --tnr-fg: var(--c-text); --tnr-accent: var(--c-accent); --tnr-accent-hover: var(--c-accent); --tnr-line: rgba(254, 254, 254, .12); --tnr-muted: rgba(254, 254, 254, .55); --tnr-font-display: 'Bebas Neue', 'Saira Condensed', Impact, sans-serif; --tnr-font-sans: 'Inter', system-ui, sans-serif; --tnr-font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ───────── FOUNDATION ───────── */ html, body { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; } body { font-family: var(--tnr-font-sans) !important; -webkit-font-smoothing: antialiased; } ::selection { background: var(--tnr-accent); color: var(--tnr-fg); } img { display: block; } /* Kill pastel/vapor layers */ .vxa-metal-field { display: none !important; } .grain { opacity: .04 !important; } .progress { background: var(--tnr-accent) !important; box-shadow: 0 0 18px rgba(78, 55, 255, .55) !important; } /* ───────── DISPLAY TYPOGRAPHY ───────── */ h1, h2, h3, .hero h1, .hero-headline h1, .hero-display, .hero-display-simple, .system-kicker, .work-intro h2.system-kicker, .intro h2, .system h2, .client-roster h2, .contact h2, .step h3, .story-header h2, .system-projects strong, .capital-proof b, .info-stat, .track span, .section-head, .section-head h2, .method h2, .proof h2, .timeline h2, .team h2, .team-grid h2, .lead, .kicker { font-family: var(--tnr-font-display) !important; font-weight: 400 !important; letter-spacing: -.005em !important; text-transform: uppercase !important; color: var(--tnr-fg) !important; text-shadow: none !important; -webkit-text-stroke: 0 transparent !important; } .eyebrow, .mono, .typo-eyebrow span { font-family: var(--tnr-font-mono) !important; color: var(--tnr-accent) !important; } /* ───────── HEADER (homepage uses
, subpages use .site-header) ───────── */ header, .site-header { background: transparent !important; z-index: 50 !important; } /* Homepage
only — subpage .site-header uses its own grid */ body > header { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; } header .logo, .site-header .logo, header .logo b, .site-header .logo b { color: var(--tnr-fg) !important; font-family: var(--tnr-font-display) !important; font-weight: 400 !important; letter-spacing: .02em !important; font-size: 1.75rem !important; line-height: 1 !important; text-decoration: none !important; } /* Homepage pill nav */ .nav-pill { background: rgba(254, 254, 254, .06) !important; border: 1px solid rgba(254, 254, 254, .16) !important; backdrop-filter: blur(16px) saturate(1.2) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2) !important; } .nav-pill a { color: var(--tnr-fg) !important; font-family: var(--tnr-font-sans) !important; } .nav-pill a:hover, .nav-pill a.is-active { color: var(--tnr-accent) !important; } /* Subpage simple nav */ .site-header .nav { display: flex; gap: 22px; align-items: center; font-family: var(--tnr-font-mono) !important; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } .site-header .nav a { color: var(--tnr-fg) !important; opacity: .8; transition: opacity .2s ease, color .2s ease; text-decoration: none !important; } .site-header .nav a:hover { opacity: 1; color: var(--tnr-accent) !important; } .site-header .nav a[aria-current="page"] { color: var(--tnr-accent) !important; opacity: 1; } /* Build pill */ .build-pill { font-family: var(--tnr-font-mono) !important; font-size: .65rem !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--tnr-muted) !important; border: 1px solid var(--tnr-line) !important; border-radius: 999px !important; padding: 6px 12px !important; background: transparent !important; } /* CTA pill (homepage) */ .cta-pill { background: var(--tnr-accent) !important; border: 0 !important; color: var(--tnr-fg) !important; font-family: var(--tnr-font-sans) !important; font-weight: 700 !important; } .cta-pill:hover { background: var(--tnr-accent-hover) !important; } .nav-toggle { background: rgba(254, 254, 254, .06) !important; border-color: rgba(254, 254, 254, .16) !important; color: var(--tnr-fg) !important; width: 48px; height: 48px; padding: 0 !important; display: none; align-items: center; justify-content: center; } .nav-toggle-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; height: 14px; } .nav-toggle-icon span { display: block; height: 1.5px; background: var(--c-text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; } .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* ──────── MOBILE DRAWER (overlay menu) ──────── */ .mobile-drawer { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(10, 10, 18, .92); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); opacity: 0; transition: opacity .26s ease; } .mobile-drawer.is-open { display: block; opacity: 1; } .mobile-drawer-panel { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px 22px max(18px, env(safe-area-inset-bottom)); gap: clamp(18px, 4vh, 32px); transform: translateY(-10px); transition: transform .3s cubic-bezier(.2,.8,.2,1); } .mobile-drawer.is-open .mobile-drawer-panel { transform: translateY(0); } .mobile-drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 4px; } .mobile-drawer-top .logo { color: var(--c-text) !important; font: 400 1.5rem/.8 var(--tnr-font-display) !important; letter-spacing: .02em !important; } .drawer-close { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(254,254,254,.18); background: rgba(254,254,254,.06); color: var(--c-text); font: 400 26px/1 var(--tnr-font-display); cursor: pointer; padding: 0 0 4px; } .mobile-drawer-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; align-content: start; margin-top: 6px; } .mobile-drawer-nav a { display: flex; align-items: baseline; gap: 14px; padding: 16px 6px; color: var(--c-text) !important; font: 400 clamp(34px, 8.5vw, 52px)/1 var(--tnr-font-display) !important; letter-spacing: -.005em !important; text-transform: uppercase; text-decoration: none !important; border-bottom: 1px solid rgba(254, 254, 254, .08); transition: color .2s ease, padding-left .2s ease; } .mobile-drawer-nav a:hover, .mobile-drawer-nav a:active { color: var(--tnr-accent) !important; padding-left: 12px; } .mobile-drawer-nav .dn { font: 600 .58rem/1 var(--tnr-font-mono); letter-spacing: .14em; color: rgba(254, 254, 254, .42); align-self: center; min-width: 22px; } .mobile-drawer-foot { display: grid; gap: 12px; padding-top: 12px; } .drawer-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 22px; border-radius: 999px; background: var(--tnr-accent) !important; color: var(--c-text) !important; font: 700 .82rem/1 var(--tnr-font-mono) !important; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; } .drawer-cta:active { background: var(--tnr-accent-hover) !important; } .drawer-meta { text-align: center; font: 600 .66rem/1 var(--tnr-font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(254, 254, 254, .42); margin: 0 !important; } body.drawer-open { overflow: hidden; } /* ───────── HEROES (homepage + subpages) ───────── */ .hero { background: var(--tnr-bg) !important; border-bottom: 1px solid var(--tnr-line) !important; } .hero:before { display: none !important; } .hero-video { filter: saturate(1.1) contrast(1.08) brightness(.62) !important; opacity: 1 !important; } .hero-headline h1 { font-family: var(--tnr-font-display) !important; font-weight: 400 !important; color: var(--tnr-fg) !important; letter-spacing: -.005em !important; line-height: .88 !important; text-shadow: 0 4px 28px rgba(0, 0, 0, .5) !important; } .hero-headline .kicker { font-family: var(--tnr-font-sans) !important; font-style: italic; font-weight: 500; color: var(--tnr-muted) !important; } .hero-crumb { font-family: var(--tnr-font-mono) !important; color: var(--tnr-muted) !important; } .hero-display, .hero-display-simple { color: var(--tnr-fg) !important; font-family: var(--tnr-font-display) !important; } .hero-eyebrow { color: var(--tnr-muted) !important; font-family: var(--tnr-font-mono) !important; text-transform: uppercase; letter-spacing: .18em; } .hero-inner, .hero-deck, .hero-copy, .hero-media, .hero-note { color: var(--tnr-fg) !important; } .hero-deck p, .hero-note { color: var(--tnr-muted) !important; } /* Info card (hero, homepage) */ .info-card { background: rgba(19, 19, 19, .66) !important; border: 1px solid var(--tnr-line) !important; backdrop-filter: blur(12px) saturate(1.1) !important; -webkit-backdrop-filter: blur(12px) saturate(1.1) !important; } .info-stat { color: var(--tnr-fg) !important; font-family: var(--tnr-font-display) !important; text-transform: none !important; letter-spacing: -.01em !important; } .info-sub { color: var(--tnr-muted) !important; font-family: var(--tnr-font-mono) !important; } .info-tags a { color: var(--tnr-fg) !important; border-color: var(--tnr-line) !important; background: transparent !important; font-family: var(--tnr-font-mono) !important; } .info-tags a:hover { background: rgba(254, 254, 254, .08) !important; color: var(--tnr-fg) !important; border-color: rgba(254, 254, 254, .32) !important; } .info-cta { background: var(--tnr-accent) !important; border: 0 !important; } .info-cta:hover { background: var(--tnr-accent-hover) !important; } .hero .scroll-cue { color: var(--tnr-muted) !important; font-family: var(--tnr-font-mono) !important; } /* ───────── HOMEPAGE: WE CREATE / WORK-INTRO ───────── */ .work-intro, .work-intro.typo-intro, #system, .work-intro.typo-intro #system { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; border-top: 1px solid var(--tnr-line) !important; border-bottom: 1px solid var(--tnr-line) !important; } .work-intro * { color: inherit; } .system-kicker, .work-intro h2.system-kicker { color: var(--tnr-fg) !important; font-family: var(--tnr-font-display) !important; font-weight: 400 !important; letter-spacing: -.005em !important; } .system-projects strong { color: var(--tnr-fg) !important; font-family: var(--tnr-font-display) !important; font-weight: 400 !important; } .system-projects span { color: var(--tnr-muted) !important; font-family: var(--tnr-font-sans) !important; } .system-projects a { color: inherit !important; text-decoration: none !important; border-bottom: 1px dotted var(--tnr-accent) !important; } .system-scroll-large { color: var(--tnr-fg) !important; border-top-color: var(--tnr-line) !important; font-family: var(--tnr-font-sans) !important; } /* Proof bar / ticker */ .proof-bar { background: rgba(254, 254, 254, .04) !important; border-color: var(--tnr-line) !important; } .proof-bar div { border-color: var(--tnr-line) !important; color: var(--tnr-fg) !important; } .proof-bar strong { color: var(--tnr-fg) !important; } .proof-bar span { color: var(--tnr-muted) !important; } .ticker { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; border-color: var(--tnr-line) !important; } .track b { color: var(--tnr-accent) !important; } /* Intro */ .intro { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; border-color: var(--tnr-line) !important; } .intro h2 { color: var(--tnr-fg) !important; } .intro p { color: var(--tnr-muted) !important; } .sequence-map:before { background: var(--tnr-line) !important; } .sequence-map span { color: var(--tnr-muted) !important; border-bottom-color: var(--tnr-line) !important; background: linear-gradient(to top, rgba(78, 55, 255, .18), transparent 46%) !important; } .sequence-map span:nth-child(odd) { background: linear-gradient(to top, rgba(78, 55, 255, .26), transparent 46%) !important; } /* Story / case studies */ .story { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; } .story-header h2 { color: var(--tnr-fg) !important; } .story-header p { color: var(--tnr-muted) !important; } .story-header:before { background: radial-gradient(circle at 20% 15%, rgba(78, 55, 255, .18), transparent 32%), radial-gradient(circle at 75% 78%, rgba(78, 55, 255, .10), transparent 28%) !important; } .step h3 { color: var(--tnr-fg) !important; } .step p { color: var(--tnr-muted) !important; font-family: var(--tnr-font-mono) !important; } .step-num { color: var(--tnr-accent) !important; font-family: var(--tnr-font-mono) !important; } .case-board { background: rgba(254, 254, 254, .04) !important; border-color: var(--tnr-line) !important; } .case-metric, .proof-heavy .case-metric { background: var(--tnr-accent) !important; color: var(--tnr-fg) !important; font-family: var(--tnr-font-mono) !important; } .capital-proof { background: linear-gradient(135deg, rgba(78, 55, 255, .22), rgba(254, 254, 254, .04)) !important; border-color: rgba(78, 55, 255, .55) !important; box-shadow: 0 0 0 1px rgba(78, 55, 255, .18), 0 22px 70px rgba(78, 55, 255, .18) !important; } .capital-proof b { color: var(--tnr-accent) !important; font-family: var(--tnr-font-display) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: -.01em !important; } .capital-proof span { color: var(--tnr-muted) !important; font-family: var(--tnr-font-mono) !important; } .case-flow span { color: var(--tnr-fg) !important; border-color: var(--tnr-line) !important; background: rgba(254, 254, 254, .03) !important; font-family: var(--tnr-font-mono) !important; } .video-card { background: #0a0a0a !important; border-color: var(--tnr-line) !important; } .video-card:before { border-color: rgba(254, 254, 254, .18) !important; } .video-card:after { border-color: rgba(254, 254, 254, .32) !important; background: rgba(19, 19, 19, .4) !important; color: var(--tnr-fg) !important; font-family: var(--tnr-font-mono) !important; } .player-controls { background: rgba(19, 19, 19, .66) !important; border-color: var(--tnr-line) !important; } .player-controls button { color: var(--tnr-fg) !important; border-color: var(--tnr-line) !important; background: rgba(254, 254, 254, .05) !important; font-family: var(--tnr-font-mono) !important; } .player-controls button.is-on, .player-controls button:hover { background: var(--tnr-accent) !important; border-color: var(--tnr-accent) !important; color: var(--tnr-fg) !important; } .film-type { color: var(--tnr-accent) !important; font-family: var(--tnr-font-mono) !important; } /* System / DJI section */ .system { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; border-color: var(--tnr-line) !important; } .system h2 { color: var(--tnr-fg) !important; } .row strong { color: var(--tnr-fg) !important; font-family: var(--tnr-font-display) !important; font-weight: 400 !important; } .row p { color: var(--tnr-muted) !important; font-family: var(--tnr-font-sans) !important; } .row .mono { color: var(--tnr-accent) !important; } #system .row:before { background: var(--tnr-accent) !important; box-shadow: 0 0 18px rgba(78, 55, 255, .55) !important; } .system-orbit { background: radial-gradient(circle at 50% 50%, rgba(78, 55, 255, .22), transparent 42%) !important; border-color: var(--tnr-line) !important; } .system-orbit span { background: var(--tnr-bg) !important; border-color: var(--tnr-line) !important; color: var(--tnr-fg) !important; font-family: var(--tnr-font-mono) !important; } .row-map i { border-color: var(--tnr-line) !important; background: rgba(78, 55, 255, .14) !important; } .row-map i:nth-child(2) { background: rgba(78, 55, 255, .28) !important; } /* DJI overlay */ .dji-bg { background: var(--tnr-bg) !important; } .dji-overlay { color: var(--tnr-fg) !important; } .dji-overlay h2 { color: var(--tnr-fg) !important; font-family: var(--tnr-font-display) !important; font-weight: 400 !important; } .dji-overlay strong { color: var(--tnr-fg) !important; font-family: var(--tnr-font-sans) !important; font-weight: 500 !important; } .dji-overlay .eyebrow { color: var(--tnr-accent) !important; } /* Client roster */ .client-roster { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; border-color: var(--tnr-line) !important; } .client-roster h2 { color: var(--tnr-fg) !important; } .client-roster .eyebrow { color: var(--tnr-accent) !important; } .client-grid { border-top-color: var(--tnr-line) !important; border-left-color: var(--tnr-line) !important; } .client-logo { background: rgba(254, 254, 254, .02) !important; border-color: var(--tnr-line) !important; } .client-logo:nth-child(5n+1), .client-logo:nth-child(5n+4) { background: rgba(78, 55, 255, .06) !important; } .client-logo svg { filter: brightness(0) invert(1) opacity(.72) saturate(0) !important; } .client-logo:hover svg { filter: brightness(0) invert(1) opacity(1) !important; } /* Contact */ .contact { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; } .contact h2 { color: var(--tnr-fg) !important; } .contact p { color: var(--tnr-muted) !important; font-family: var(--tnr-font-sans) !important; } .contact-diagram span { border-color: var(--tnr-line) !important; color: var(--tnr-accent) !important; background: rgba(254, 254, 254, .02) !important; font-family: var(--tnr-font-mono) !important; } .contact-diagram span:nth-child(even) { color: var(--tnr-fg) !important; } .email-link { color: var(--tnr-muted) !important; font-family: var(--tnr-font-mono) !important; } .legacy-strip { color: var(--tnr-muted) !important; border-color: var(--tnr-line) !important; font-family: var(--tnr-font-mono) !important; } /* ───────── BUTTONS / CHIPS ───────── */ .chip, .button, button.btn { font-family: var(--tnr-font-sans) !important; font-weight: 700 !important; border-radius: 999px !important; } .button, button.btn { background: var(--tnr-accent) !important; color: var(--tnr-fg) !important; border: 0 !important; } .button:hover, button.btn:hover { background: var(--tnr-accent-hover) !important; } .button.secondary, .button.dark { background: transparent !important; border: 1px solid var(--tnr-fg) !important; color: var(--tnr-fg) !important; } .button.secondary:hover, .button.dark:hover { background: var(--tnr-fg) !important; color: var(--tnr-bg) !important; } .hero-cta, .chip.hero-cta { background: var(--tnr-accent) !important; color: var(--tnr-fg) !important; border: 0 !important; } .chip { background: rgba(254, 254, 254, .06) !important; color: var(--tnr-fg) !important; border-color: var(--tnr-line) !important; } .chips { display: flex; gap: 8px; flex-wrap: wrap; } /* ───────── SUBTLE TREATMENTS / LEFTOVERS ───────── */ .hero-copy, .case-board, .row, .beat, .image-band figure, .collage figure { background: rgba(254, 254, 254, .04) !important; border-color: var(--tnr-line) !important; box-shadow: 0 18px 60px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(254, 254, 254, .06) !important; } .hero-copy { color: var(--tnr-fg) !important; } .hero-copy p { color: var(--tnr-fg) !important; font-family: var(--tnr-font-sans) !important; font-weight: 500 !important; } .hero-copy:before, .case-board:before, .person:after, .portrait:before { background: linear-gradient(120deg, rgba(254, 254, 254, .08), transparent 24%, transparent 68%, rgba(78, 55, 255, .08)) !important; } /* Lime/red leftover purges */ .typo-intro:before { background: radial-gradient(circle at 92% 12%, rgba(78, 55, 255, .18), transparent 26%), radial-gradient(circle at 6% 96%, rgba(78, 55, 255, .10), transparent 30%) !important; } .typo-eyebrow .dotmark, .type-launch .type-launch-dot { background: var(--tnr-accent) !important; box-shadow: 0 0 24px rgba(78, 55, 255, .6) !important; } .type-tail-words .tail-2 .converts:before { background: var(--tnr-accent) !important; } #dji.dji-bg .eyebrow { color: var(--tnr-accent) !important; } .dot { background: var(--tnr-accent) !important; box-shadow: 0 0 20px rgba(78, 55, 255, .55) !important; } /* ───────── FOUNDER PAGE ───────── */ .method, .proof, .timeline, .section, .section-head { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; } .section-head h2 { color: var(--tnr-fg) !important; } .beat { background: rgba(254, 254, 254, .03) !important; border-color: var(--tnr-line) !important; color: var(--tnr-fg) !important; } .beat-year { color: var(--tnr-accent) !important; font-family: var(--tnr-font-mono) !important; } .timeline { border-color: var(--tnr-line) !important; } .portrait { background: rgba(254, 254, 254, .03) !important; border-color: var(--tnr-line) !important; } .image-band figure, .collage figure { background: rgba(254, 254, 254, .03) !important; } .caption, .sources { color: var(--tnr-muted) !important; font-family: var(--tnr-font-mono) !important; } .quote { color: var(--tnr-fg) !important; font-family: var(--tnr-font-sans) !important; border-left: 2px solid var(--tnr-accent) !important; } .kicker { color: var(--tnr-accent) !important; font-family: var(--tnr-font-mono) !important; } .lead { color: var(--tnr-fg) !important; font-family: var(--tnr-font-display) !important; } .hero-deck { color: var(--tnr-fg) !important; } .hero-links a { color: var(--tnr-accent) !important; } /* ───────── TEAM PAGE ───────── */ .team, .team-grid, .band { background: var(--tnr-bg) !important; color: var(--tnr-fg) !important; } .team-grid { display: grid; gap: 16px; } .person { background: rgba(254, 254, 254, .03) !important; border: 1px solid var(--tnr-line) !important; color: var(--tnr-fg) !important; border-radius: 14px !important; } .person:hover { border-color: var(--tnr-accent) !important; } .person .name, .name { color: var(--tnr-fg) !important; font-family: var(--tnr-font-display) !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: -.005em !important; } .person .role, .role { color: var(--tnr-muted) !important; font-family: var(--tnr-font-mono) !important; } .featured { background: rgba(78, 55, 255, .08) !important; border-color: rgba(78, 55, 255, .35) !important; } .num { color: var(--tnr-accent) !important; font-family: var(--tnr-font-display) !important; } .rule { border-color: var(--tnr-line) !important; background: var(--tnr-line) !important; } /* ───────── PORTFOLIO PAGE ───────── */ .filters, .filter-bar { background: var(--tnr-bg) !important; } .filter, .filters .filter { background: transparent !important; border: 1px solid var(--tnr-line) !important; color: var(--tnr-fg) !important; font-family: var(--tnr-font-mono) !important; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px !important; padding: 8px 14px !important; } .filter:hover { border-color: var(--tnr-accent) !important; color: var(--tnr-accent) !important; } .filter.active, .filter.is-active { background: var(--tnr-accent) !important; color: var(--tnr-fg) !important; border-color: var(--tnr-accent) !important; } .grid { background: var(--tnr-bg) !important; } .card, .card-launch { background: rgba(254, 254, 254, .03) !important; border: 1px solid var(--tnr-line) !important; border-radius: 14px !important; color: var(--tnr-fg) !important; overflow: hidden; transition: transform .25s ease, border-color .25s ease; } .card:hover, .card-launch:hover { border-color: var(--tnr-accent) !important; transform: translateY(-3px); } .card-body { color: var(--tnr-fg) !important; } .card-media, .media-placeholder { background: #0a0a0a !important; } .card-corner, .meta, .meta-num, .meta-year, .client-name { font-family: var(--tnr-font-mono) !important; color: var(--tnr-muted) !important; text-transform: uppercase; letter-spacing: .08em; } .count-line, .empty { color: var(--tnr-muted) !important; font-family: var(--tnr-font-mono) !important; } .hot { color: var(--tnr-accent) !important; font-family: var(--tnr-font-mono) !important; } /* Portfolio modal */ .modal { background: rgba(19, 19, 19, .9) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .modal-panel { background: var(--tnr-bg) !important; border: 1px solid var(--tnr-line) !important; border-radius: 14px !important; color: var(--tnr-fg) !important; } .modal-info { color: var(--tnr-fg) !important; } .modal-video { background: #0a0a0a !important; } .close { color: var(--tnr-fg) !important; background: rgba(254, 254, 254, .06) !important; border: 1px solid var(--tnr-line) !important; } .close:hover { background: var(--tnr-accent) !important; border-color: var(--tnr-accent) !important; } .load-more, .load-more-wrap .button { /* uses .button rules */ } /* ───────── FOOTERS ───────── */ footer, .footer { background: var(--tnr-bg) !important; color: var(--tnr-muted) !important; border-top: 1px solid var(--tnr-line) !important; font-family: var(--tnr-font-mono) !important; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: 24px 32px !important; } footer a, .footer a { color: var(--tnr-muted) !important; } footer a:hover, .footer a:hover { color: var(--tnr-accent) !important; } /* ───────── PORTFOLIO LEFTOVERS — beat higher-specificity inline rules ───────── */ .hero-display h1 .dot, .hero-display .dot, .dotmark { background: var(--tnr-accent) !important; box-shadow: 0 0 24px rgba(78, 55, 255, .6) !important; } .tag.hot, .tag, .case-metric, .filter-count, .meta .meta-num { background: transparent !important; color: var(--tnr-accent) !important; border-color: var(--tnr-line) !important; } .tag.hot { background: var(--tnr-accent) !important; color: var(--tnr-fg) !important; border-color: var(--tnr-accent) !important; } .hero, .hero-display, .grid { background: var(--tnr-bg) !important; background-image: none !important; } .cta, .portfolio-cta, .site-footer { background: var(--tnr-bg) !important; background-image: none !important; color: var(--tnr-fg) !important; border-top: 1px solid var(--tnr-line) !important; } .cta b, .portfolio-cta b { color: var(--tnr-accent) !important; } .site-footer:before { display: none !important; } .story, .team, .contact { background: var(--tnr-bg) !important; background-image: none !important; } /* Kill the animated lime pulse line everywhere */ .sequence-map:after, .filters:after, .hero:after, .collage:after, .image-band:after { display: none !important; } /* Card / video filters — drop the saturation pull-back */ .card img, .card video { filter: none !important; } .card:hover img, .card:hover video { filter: saturate(1.1) contrast(1.05) brightness(1) !important; } .card-body:before, .card-content:before, .card-info:before, .image-band figcaption:before, .collage figcaption:before { background: linear-gradient(118deg, rgba(254, 254, 254, .12), transparent 28%, transparent 68%, rgba(78, 55, 255, .08)) !important; } /* ───────── PERSONA SYNTHESIS SECTION (homepage embed) ───────── */ .persona-section { position: relative; background: #0A0E1C !important; color: var(--c-muted); padding: clamp(72px, 9vw, 140px) clamp(20px, 4vw, 64px); border-top: 1px solid rgba(232, 223, 207, .08); border-bottom: 1px solid rgba(232, 223, 207, .08); display: grid; gap: clamp(28px, 4vw, 56px); overflow: hidden; } .persona-section:before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 26%, rgba(91, 202, 224, .07), transparent 50%), radial-gradient(ellipse at 22% 72%, rgba(193, 103, 232, .06), transparent 50%); pointer-events: none; } .persona-section-head { position: relative; z-index: 2; display: grid; gap: 18px; max-width: 78ch; } .persona-kicker { display: inline-flex; align-items: center; gap: 12px; font: 700 11px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: rgba(91, 202, 224, .85); } .persona-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(193, 103, 232, .85); box-shadow: 0 0 20px rgba(193, 103, 232, .55); } .persona-section h2 { font: 400 clamp(46px, 7vw, 110px)/.88 'Bebas Neue', Impact, sans-serif !important; letter-spacing: -.005em !important; text-transform: uppercase !important; color: var(--c-muted) !important; max-width: 14ch; text-wrap: balance; } .persona-section p { font: 500 clamp(15px, 1.3vw, 19px)/1.5 'JetBrains Mono', monospace !important; letter-spacing: 0; text-transform: none; color: rgba(232, 223, 207, .68); max-width: 64ch; margin: 0 !important; } .persona-stage { position: relative; z-index: 2; aspect-ratio: 21 / 9; width: 100%; border: 1px solid rgba(232, 223, 207, .10); border-radius: clamp(12px, 1.4vw, 22px); overflow: hidden; box-shadow: 0 60px 160px rgba(2, 4, 14, .6); background: radial-gradient(ellipse at 78% 26%, rgba(91,202,224,.07), transparent 50%), radial-gradient(ellipse at 22% 72%, rgba(193,103,232,.06), transparent 50%), linear-gradient(180deg, #0A0E1C, #0D1224 60%, #0A0E1C); color: var(--c-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ── PANEL (canvas + overlays) — scoped inside .persona-stage ── */ .persona-stage .pe-panel { position: absolute; inset: 0; border: 0; background: radial-gradient(circle at 56% 48%, rgba(91,202,224,.025), transparent 45%), linear-gradient(135deg, rgba(193,103,232,.015), rgba(91,202,224,.010)); box-shadow: inset 0 0 0 1px rgba(232,223,207,.035); overflow: hidden; cursor: crosshair; } .persona-stage .pe-panel:before { content: "AGENTIC PERSONA SYNTHESIS · RIDGE E-BIKE"; position: absolute; left: 18px; top: 16px; z-index: 3; color: rgba(232,223,207,.60); font: 800 10px/1 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; } .persona-stage .pe-panel:after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(232,223,207,.05); pointer-events: none; } .persona-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ── Corner tags ── */ .persona-stage .pe-tag { position: absolute; z-index: 3; color: rgba(232,223,207,.42); font: 800 9px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; } .persona-stage .pe-tag--bl { bottom: 16px; left: 18px; color: rgba(232,223,207,.72); } .persona-stage .pe-tag--br { bottom: 16px; right: 18px; } /* ── Persona label (dossier card) ── */ .persona-stage .pe-label { position: absolute; top: 42px; left: 28px; z-index: 4; width: min(72vw, 1500px); color: rgba(232,223,207,.85); font: 800 10px/1.5 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; opacity: 0; transition: opacity .55s ease; } .persona-stage .pe-label.active { opacity: 1; } .persona-stage .pe-label .agent { color: rgba(193,103,232,.78); font-weight: 700; display: block; font-size: 10px; letter-spacing: .20em; } .persona-stage .pe-label .name { display: block; margin: 14px 0 0; font-size: 64px; line-height: .92; font-weight: 800; color: var(--c-muted); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; overflow: visible; } .persona-stage .pe-label .name--placeholder { font-weight: 500; color: rgba(232,223,207,.42); letter-spacing: .14em; font-size: clamp(18px, 1.9vw, 24px) !important; margin-top: 18px; } .persona-stage .pe-label .name--revealed { animation: pe-name-reveal .55s cubic-bezier(.16,1,.3,1); } @keyframes pe-name-reveal { 0% { opacity: 0; letter-spacing: .06em; transform: translateY(6px); } 60% { opacity: 1; letter-spacing: -.04em; } 100% { opacity: 1; letter-spacing: -.02em; transform: translateY(0); } } .persona-stage .pe-label .dossier { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 5px; font-size: 11px; letter-spacing: .05em; line-height: 1.5; opacity: 0; transition: opacity .45s ease .15s; } .persona-stage .pe-label.revealed .dossier { opacity: 1; } .persona-stage .pe-label .dossier .k { color: rgba(91,202,224,.65); font-weight: 700; letter-spacing: .18em; font-size: 9px; text-transform: uppercase; white-space: nowrap; padding-top: 1px; } .persona-stage .pe-label .dossier .v { color: rgba(232,223,207,.94); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .persona-stage .pe-label .dossier .v .ocean-key { color: rgba(193,103,232,.72); font-weight: 700; margin-right: 3px; } .persona-stage .pe-label .dossier .v .ocean-num { color: var(--c-muted); font-weight: 700; margin-right: 9px; } /* ── Signal feed (right-side ticker) ── */ .persona-stage .pe-feed { position: absolute; top: 118px; left: 28px; z-index: 5; width: min(56vw, 1100px); pointer-events: none; display: flex; flex-direction: column; gap: 3px; font-family: 'JetBrains Mono', ui-monospace, monospace; overflow: hidden; } .persona-stage .pe-feed .signal-item { opacity: 0; transform: translateY(-3px); transition: opacity .22s ease, transform .22s ease; padding: 2px 0 2px 10px; border-left: 1px solid rgba(91,202,224,.36); font-size: 10px; line-height: 1.35; color: rgba(232,223,207,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .persona-stage .pe-feed .signal-item.visible { opacity: 1; transform: translateY(0); } .persona-stage .pe-feed .signal-item.fading { opacity: .22; border-left-color: rgba(232,223,207,.06); } .persona-stage .pe-feed .signal-item .sig-id { display: inline; color: rgba(193,103,232,.62); font-weight: 700; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; margin-right: 6px; } .persona-stage .pe-feed .signal-item .text { color: rgba(232,223,207,.92); } /* ── Notice ── */ .persona-stage .pe-notice { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(244,240,231,.45); font: 500 11px/1.4 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; text-align: center; z-index: 5; pointer-events: none; opacity: 1; transition: opacity .6s ease; } .persona-stage .pe-notice.hidden { opacity: 0; } /* ── PORTRAIT / NARROW VIEWPORT — vertical-friendly layout ── */ @media (max-width: 880px) { .persona-stage { aspect-ratio: 4 / 5; } .persona-stage .pe-panel:before { font-size: 9px; letter-spacing: .14em; left: 14px; top: 12px; } .persona-stage .pe-tag { font-size: 8px; } .persona-stage .pe-tag--bl { left: 14px; bottom: 12px; } .persona-stage .pe-tag--br { right: 14px; bottom: 12px; } .persona-stage .pe-label { top: 34px; left: 18px; width: calc(100% - 36px); } .persona-stage .pe-label .name { font-size: clamp(28px, 7vw, 48px) !important; white-space: normal; line-height: .95; } .persona-stage .pe-label .dossier { grid-template-columns: 1fr; gap: 2px 0; row-gap: 2px; font-size: 10px; margin-top: 12px; } .persona-stage .pe-label .dossier .k { padding-top: 6px; } .persona-stage .pe-feed { top: auto; bottom: 56px; left: 18px; width: calc(100% - 36px); max-height: 40%; gap: 2px; } .persona-stage .pe-feed .signal-item { font-size: 9px; padding-left: 8px; } } @media (max-width: 480px) { .persona-stage { aspect-ratio: 3 / 4; } .persona-stage .pe-label .name { font-size: clamp(24px, 8vw, 36px) !important; } } @media (max-height: 520px) and (orientation: landscape) { /* Landscape phone — give the canvas the room, shrink HTML overlays */ .persona-stage { aspect-ratio: 21 / 9; } .persona-stage .pe-label .name { font-size: clamp(22px, 4vw, 36px) !important; } } .persona-cta { position: relative; z-index: 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 1px solid rgba(232, 223, 207, .22); background: transparent; color: var(--c-muted) !important; font: 700 11px/1 'JetBrains Mono', monospace !important; letter-spacing: .08em; text-transform: uppercase; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; min-height: 44px; } .persona-cta:hover { background: rgba(193, 103, 232, .12); border-color: rgba(193, 103, 232, .55); color: var(--c-text) !important; transform: translateY(-1px); } .persona-cta span { color: rgba(91, 202, 224, .9); } @media (max-width: 768px) { .persona-stage { aspect-ratio: 4 / 5; } .persona-section { padding: 56px 18px; } } @media (max-width: 480px) { .persona-stage { aspect-ratio: 3 / 4; } } /* ───────── RESPONSIVE ───────── */ /* Tablet and below — subpage nav becomes horizontally scrollable so links don't clip */ @media (max-width: 980px) { .site-header .nav { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; gap: 14px !important; } .site-header .nav::-webkit-scrollbar { display: none; } .site-header .nav a { flex: 0 0 auto !important; white-space: nowrap; padding: 6px 4px; } .build-pill { display: none !important; } } /* Mobile — tighter paddings, hamburger swap on homepage */ @media (max-width: 768px) { body > header { padding: 14px 18px; } .site-header { padding: 10px 14px !important; } .site-header .logo, body > header .logo { font-size: 1.4rem !important; } .site-header .nav { gap: 10px !important; font-size: .62rem !important; letter-spacing: .08em !important; } .site-header .nav a { padding: 6px 2px; } .info-stat { font-size: 2.5rem !important; } /* Portfolio chapter — collapse to single column so the description doesn't overlap */ .chapter { grid-template-columns: 1fr !important; gap: 10px !important; padding: 22px 14px 14px !important; } .chapter h2 { font-size: clamp(38px, 13vw, 62px) !important; line-height: .88 !important; } .chapter p { font-size: 14px !important; line-height: 1.35 !important; } /* Portfolio hero — shrink display so it fits */ .hero-display h1, .hero-display-simple h1 { font-size: clamp(56px, 18vw, 88px) !important; line-height: .9 !important; } /* Filters strip — horizontally scrollable, sized for thumb */ .controls, .filter-bar { padding: 8px 12px !important; } .filters { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; gap: 8px !important; } .filters::-webkit-scrollbar { display: none; } .filter { flex: 0 0 auto !important; white-space: nowrap !important; padding: 6px 12px !important; font-size: 10px !important; } /* Portfolio cards — single column on phones */ .card, .card:nth-child(n) { grid-column: 1 / -1 !important; } /* Prevent any inline-grid header layout from clipping the nav */ body { overflow-x: hidden; } } /* Phone — even tighter */ @media (max-width: 480px) { body > header, .site-header { padding: 10px 12px !important; } .site-header .logo, body > header .logo { font-size: 1.25rem !important; } .site-header .nav { font-size: .6rem !important; gap: 8px !important; } .info-card { right: 16px !important; left: 16px !important; bottom: 16px !important; padding: 18px !important; } }