/* ========================================================================== Traffiqon — Obsidian & Platinum Premium dark design system. Loaded AFTER tailwind + style.css so it owns the final look. Two layers: 1. Tokens + new components (.pnav, .btn-*, .panel, .wire-*) 2. A "bridge" that neutralises the old emerald / teal / orange / light utility classes still baked into the page markup. ========================================================================== */ /* ------------------------------- 1. TOKENS ------------------------------ */ :root { --bg: #08090B; --bg-raised: #0C0E12; --bg-panel: #101318; --surface: rgba(255, 255, 255, 0.028); --surface-hover: rgba(255, 255, 255, 0.055); --line: rgba(255, 255, 255, 0.085); --line-strong: rgba(255, 255, 255, 0.16); --text: #F4F5F7; --text-dim: #B4BAC6; --text-muted: #7F8797; --accent: #7C8CF8; --accent-soft: #A9B4FF; --accent-deep: #4E5DD4; --accent-glow: rgba(124, 140, 248, 0.35); --radius: 14px; --radius-lg: 22px; --shell: 1240px; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Same families the site already used — Inter for everything, Poppins kept available for anything that asked for it. */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; } /* ------------------------------- 2. BASE -------------------------------- */ .theme-dark { background: var(--bg) !important; } .theme-dark body { /* transparent so the fixed .page-aura backdrop (z-index:-1) shows through */ background: transparent !important; color: var(--text) !important; font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* style.css sets `overflow-x: hidden` on BOTH html and body. That combination turns into its own scroll container and kills vertical scrolling on every page that loads it. `clip` gives the same horizontal containment without creating a scroll container. */ .theme-dark, .theme-dark body { overflow-x: clip; overflow-y: visible; } .theme-dark ::selection { background: var(--accent); color: #06070A; } .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5 { font-family: var(--font-display); letter-spacing: -0.028em; color: var(--text); } .theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } .theme-dark ::-webkit-scrollbar-track { background: #06070A; } .theme-dark ::-webkit-scrollbar-thumb { background: #23262E; border-radius: 20px; border: 2px solid #06070A; } .theme-dark ::-webkit-scrollbar-thumb:hover { background: #33374280; } /* Shell + section rhythm */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 24px; } .section { position: relative; padding: clamp(44px, 4.6vw, 66px) 0; } .section--tight { padding: clamp(36px, 4vw, 56px) 0; } .section-rule { border-top: 1px solid var(--line); } /* --------------------------- 3. TYPOGRAPHY ------------------------------ */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--line-strong); } .eyebrow--dot::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .display { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; font-size: clamp(2.4rem, 5.6vw, 4.2rem); color: var(--text); } .display-sm { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.028em; font-size: clamp(1.8rem, 3.4vw, 2.7rem); color: var(--text); } .display em, .display-sm em { font-style: normal; color: transparent; background: linear-gradient(100deg, var(--accent-soft), var(--accent) 55%, #6f7edf); -webkit-background-clip: text; background-clip: text; } /* Outlined "wireframe" type — hollow letters, matches the 3D language */ .display-outline { color: #5A6070; } .lede { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.7; color: var(--text-dim); max-width: 58ch; } .muted { color: var(--text-muted); } /* ------------------- 4. WIREFRAME / GRID BACKGROUNDS -------------------- */ .wire-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 20%, transparent 78%); } /* Perspective floor grid — the "3D room" the whole site sits in */ .wire-floor { position: absolute; left: 50%; bottom: -10%; width: 220%; height: 60%; transform: translateX(-50%) perspective(560px) rotateX(72deg); transform-origin: 50% 100%; pointer-events: none; background-image: linear-gradient(to right, rgba(124, 140, 248, 0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(124, 140, 248, 0.18) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to top, #000 0%, transparent 72%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%); opacity: 0.7; } .glow-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px); background: radial-gradient(circle, var(--accent-glow), transparent 70%); opacity: 0.55; } /* ---------------------- PROMPT STUDIO (the product) --------------------- */ .studio { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 0; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: radial-gradient(ellipse 70% 100% at 100% 0%, rgba(124, 140, 248, 0.13), transparent 62%), linear-gradient(160deg, #101319 0%, #0A0B0F 62%); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95); } @media (max-width: 900px) { .studio { grid-template-columns: 1fr; } } .studio__panel { padding: 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; min-width: 0; } @media (max-width: 900px) { .studio__panel { border-right: 0; border-bottom: 1px solid var(--line); } } .studio__bar { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } .studio__dots { display: flex; gap: 6px; margin-right: 6px; } .studio__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); } .studio__dots i:first-child { background: rgba(124, 140, 248, 0.85); } /* The prompt box — a terminal, because that is what it is */ .studio__box { position: relative; flex: 0 0 auto; min-height: 112px; padding: 18px 18px 18px 34px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, 0.35); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; line-height: 1.65; color: var(--text-dim); } .studio__box::before { content: '>'; position: absolute; left: 16px; top: 18px; color: var(--accent); font-weight: 700; } .studio__caret { display: inline-block; width: 8px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .studio__chips { display: flex; flex-wrap: wrap; gap: 8px; } .studio__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 30px; cursor: pointer; transition: all 0.28s var(--ease); } .studio__chip i { font-size: 0.78em; color: var(--text-muted); transition: color 0.28s var(--ease); } .studio__chip:hover { border-color: var(--line-strong); color: var(--text); } .studio__chip.is-active { color: #07080B; background: linear-gradient(140deg, var(--accent-soft), var(--accent-deep)); border-color: transparent; box-shadow: 0 8px 22px -10px var(--accent-glow); } .studio__chip.is-active i { color: #07080B; } .studio__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: auto; } .studio__tag { padding: 5px 11px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-soft); background: rgba(124, 140, 248, 0.1); border: 1px solid rgba(124, 140, 248, 0.26); border-radius: 20px; } .studio__stage { position: relative; min-height: clamp(360px, 42vw, 520px); cursor: grab; touch-action: pan-y; } .studio__stage.is-grabbing { cursor: grabbing; } .studio__stage canvas { display: block; width: 100%; height: 100%; } .studio__badge { position: absolute; left: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); background: rgba(10, 11, 15, 0.72); backdrop-filter: blur(10px); border: 1px solid rgba(124, 140, 248, 0.3); border-radius: 30px; pointer-events: none; } .studio__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: live 1.8s ease-in-out infinite; } @keyframes live { 50% { opacity: 0.25; } } /* Prompt → Render → Publish, under the studio */ .flow { display: flex; align-items: stretch; gap: 10px; margin-top: 22px; } .flow__step { position: relative; flex: 1; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); transition: border-color 0.35s var(--ease), transform 0.4s var(--ease); } .flow__step:hover { border-color: rgba(124, 140, 248, 0.45); transform: translateY(-3px); } .flow__n { position: absolute; top: 16px; right: 18px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text-muted); } .flow__step > i { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 11px; font-size: 0.9rem; color: #07080B; background: linear-gradient(140deg, var(--accent-soft), var(--accent-deep)); box-shadow: 0 8px 20px -8px var(--accent-glow); } .flow__step b { display: block; font-size: 1rem; font-weight: 700; color: var(--text); } .flow__step span:not(.flow__n) { display: block; margin-top: 5px; font-size: 0.86rem; color: var(--text-muted); } .flow__arrow { display: grid; place-items: center; color: var(--line-strong); font-size: 0.8rem; flex: 0 0 auto; padding: 0 2px; } @media (max-width: 780px) { .flow { flex-direction: column; } .flow__arrow { transform: rotate(90deg); padding: 2px 0; } } /* Foreground 3D: the ad-creative carousel. Full-width, in front of the content — not a background texture. */ .ad3d { position: relative; width: 100%; height: clamp(380px, 46vw, 520px); cursor: grab; touch-action: pan-y; border-radius: var(--radius-lg); background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(124, 140, 248, 0.14), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%); border: 1px solid var(--line); overflow: hidden; } .ad3d.is-grabbing { cursor: grabbing; } .ad3d canvas { display: block; width: 100%; height: 100%; } .ad3d__hint { position: absolute; right: 16px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); background: rgba(12, 14, 18, 0.7); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 30px; pointer-events: none; } /* Three.js mount points */ .wire-stage { position: absolute; inset: 0; pointer-events: none; } .wire-stage canvas { display: block; width: 100%; height: 100%; } /* Hero stage sits behind the copy — faded on its left edge so headlines stay readable, and clipped to a soft vignette so it reads as an object in space. */ .wire-stage--hero { mask-image: radial-gradient(ellipse 74% 74% at 62% 50%, #000 30%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 74% 74% at 62% 50%, #000 30%, transparent 76%); } @media (max-width: 900px) { /* On narrow screens the hero object sinks behind the copy instead of competing with it. */ .wire-stage--hero { top: auto !important; bottom: -8% !important; right: -22% !important; transform: none !important; width: 118vw !important; height: 118vw !important; opacity: 0.3 !important; } .page-aura .wire-stage { opacity: 0.16; right: -30%; } } .hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, var(--bg) 26%, rgba(8, 9, 11, 0.72) 48%, transparent 70%); } /* When the hero object sits on the left instead, the scrim flips with it. */ .hero-scrim--left { background: linear-gradient(260deg, var(--bg) 22%, rgba(8, 9, 11, 0.7) 46%, rgba(8, 9, 11, 0.55) 100%); } .wire-inline { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 560px; } .wire-inline canvas { display: block; width: 100%; height: 100%; } /* Site-wide backdrop for the inner pages: a fixed wireframe object drifting behind the content. z-index:-1 keeps it strictly beneath every element, so it can never intercept clicks or cover copy. */ .page-aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .page-aura .wire-grid { opacity: 0.75; } .page-aura .wire-stage { left: auto; right: -12%; top: 6%; width: min(680px, 52vw); height: min(680px, 52vw); opacity: 0.3; mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%); } .page-aura .glow-orb { width: 560px; height: 560px; top: -180px; left: -160px; opacity: 0.4; } /* --------------------------- 5. NAVIGATION ------------------------------ */ .pnav { position: sticky; top: 0; z-index: 100; background: rgba(8, 9, 11, 0.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } /* The ads pages keep their light body, so the nav needs a solid dark plate there instead of the translucent one that assumes an obsidian page. */ html:not(.theme-dark) .pnav { background: #0B0C10; backdrop-filter: none; -webkit-backdrop-filter: none; } html:not(.theme-dark) .pnav__mobile { background: #0B0C10; } .pnav__inner { max-width: var(--shell); margin-inline: auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .pnav__brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; } /* The mark is lit, not outlined — a glowing cube on an accent plate, with a halo behind it so it reads instantly against the dark bar. */ .pnav__mark { position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(145deg, #8e9bff 0%, #6b7bf0 45%, #3f4dc4 100%); box-shadow: 0 0 0 1px rgba(169, 180, 255, 0.5), 0 0 22px -2px rgba(124, 140, 248, 0.75), 0 6px 18px -6px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: box-shadow 0.4s var(--ease), transform 0.6s var(--ease); } /* Pulsing halo */ .pnav__mark::after { content: ''; position: absolute; inset: -9px; border-radius: 18px; background: radial-gradient(circle, rgba(124, 140, 248, 0.85), transparent 68%); opacity: 0.9; z-index: -1; animation: mark-pulse 2.4s ease-in-out infinite; } @keyframes mark-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.25); } } /* A light sweeps across the mark — an unmistakable "powered on" cue rather than a static glow. */ .pnav__mark::before { content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 48%, transparent 66%); background-size: 260% 100%; background-position: 180% 0; animation: mark-sweep 3.6s ease-in-out infinite; pointer-events: none; } @keyframes mark-sweep { 0%, 55% { background-position: 180% 0; } 85%, 100% { background-position: -80% 0; } } /* The real brand lockup (mark + wordmark in one asset). It replaces the built mark/word pair, so it carries its own sizing and hover lift. */ .pnav__logo { height: 34px; width: auto; display: block; transition: opacity .35s var(--ease), transform .6s var(--ease); } .pnav__brand:hover .pnav__logo { opacity: .88; transform: translateY(-1px); } .pfoot .pnav__logo { height: 30px; } @media (max-width: 640px) { .pnav__logo { height: 29px; } } /* The wordmark lights with it */ .pnav__brand .pnav__word { background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 38%, #A9B4FF 50%, #FFFFFF 62%, #FFFFFF 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: word-sweep 3.6s ease-in-out infinite; } @keyframes word-sweep { 0%, 55% { background-position: 180% 0; } 85%, 100% { background-position: -60% 0; } } .pnav__mark svg { width: 21px; height: 21px; stroke: #FFFFFF !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } .pnav__brand:hover .pnav__mark { transform: rotate(-90deg) scale(1.06); box-shadow: 0 0 0 1px rgba(199, 207, 255, 0.8), 0 0 34px 0 rgba(124, 140, 248, 0.95), 0 6px 20px -6px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .pnav__word { font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; letter-spacing: -0.03em; color: #FFFFFF; } @media (prefers-reduced-motion: reduce) { .pnav__mark::after { animation: none; opacity: 0.8; } .pnav__mark::before, .pnav__brand .pnav__word { animation: none; } .pnav__brand .pnav__word { -webkit-text-fill-color: #FFFFFF; } } .pnav__links { display: none; align-items: center; gap: 4px; margin-left: auto; } @media (min-width: 1024px) { .pnav__links { display: flex; } .pnav__burger { display: none !important; } } .pnav__link { position: relative; padding: 9px 14px; font-size: 0.875rem; font-weight: 500; color: var(--text-dim); text-decoration: none; border-radius: 9px; transition: color 0.25s var(--ease), background 0.25s var(--ease); white-space: nowrap; } .pnav__link:hover, .pnav__link[aria-current="page"] { color: var(--text); background: var(--surface-hover); } .pnav__link[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: var(--accent); } /* Services dropdown */ .pnav__drop { position: relative; } .pnav__panel { position: absolute; top: calc(100% + 10px); left: 0; width: 320px; padding: 8px; background: rgba(14, 16, 21, 0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; } /* Ten services in one column would run off the bottom of the viewport, so the full menu lays them out two-up. */ .pnav__panel--wide { width: min(620px, calc(100vw - 48px)); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; /* Anchored to the right: the Services link sits in the right-hand nav cluster, so a left-anchored 620px panel runs off the edge of the screen. */ left: auto; right: 0; } .pnav__drop:hover .pnav__panel, .pnav__drop:focus-within .pnav__panel { opacity: 1; visibility: visible; transform: translateY(0); } .pnav__item { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: var(--text-dim); transition: background 0.2s var(--ease), color 0.2s var(--ease); } .pnav__item:hover { background: var(--surface-hover); color: var(--text); } .pnav__item i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--accent-soft); flex-shrink: 0; } .pnav__item b { display: block; font-size: 0.85rem; font-weight: 600; } .pnav__item span { display: block; font-size: 0.72rem; color: var(--text-muted); } .pnav__burger { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; } .pnav__mobile { display: none; padding: 10px 24px 22px; border-top: 1px solid var(--line); background: rgba(8, 9, 11, 0.98); } .pnav__mobile.is-open { display: block; } .pnav__mobile a { display: block; padding: 13px 4px; font-size: 0.95rem; color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--line); } .pnav__mobile a:last-of-type { border-bottom: 0; } .pnav__mobile a:hover { color: var(--text); } /* The dim link colour above also caught the primary button inside the sheet, leaving its label barely readable on the violet fill. */ .pnav__mobile a.btn { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 20px; margin-top: 14px; color: #FFFFFF; border-bottom: 0; text-align: center; } .pnav__mobile a.btn:hover { color: #FFFFFF; } .tag-new { display: inline-block; margin-left: 8px; padding: 2px 7px; font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); border: 1px solid rgba(124, 140, 248, 0.4); border-radius: 20px; vertical-align: middle; } /* ---------------------------- 6. BUTTONS -------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; font-family: var(--font-body); font-size: 0.925rem; font-weight: 600; letter-spacing: -0.01em; border-radius: 11px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.35s var(--ease), color 0.3s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn i { font-size: 0.85em; } /* Near-black label on a gradient that ends dark was unreadable at the deep end of the ramp — the label is white and the ramp starts deeper. */ .btn--primary { background: linear-gradient(140deg, var(--accent) 0%, var(--accent-deep) 100%); color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); box-shadow: 0 12px 34px -14px var(--accent-glow), inset 0 0 0 1px rgba(255, 255, 255, .14); } .btn--primary:hover, .btn--primary:focus-visible { background: linear-gradient(140deg, var(--accent-soft) 0%, var(--accent) 55%, var(--accent-deep) 100%); box-shadow: 0 20px 46px -14px var(--accent-glow), inset 0 0 0 1px rgba(255, 255, 255, .22); color: #FFFFFF; } .btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--text); } .btn--ghost:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--text); } .btn--link { padding: 0; color: var(--accent-soft); background: none; font-size: 0.875rem; } .btn--link:hover { transform: none; color: var(--text); } .btn--link i { transition: transform 0.3s var(--ease); } .btn--link:hover i { transform: translateX(4px); } .btn--wide { width: 100%; } /* ----------------------- 7. PANELS / GLASS CARDS ------------------------ */ .panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; overflow: hidden; transition: border-color 0.4s var(--ease), transform 0.5s var(--ease), background 0.4s var(--ease); } .panel::before { /* hairline sheen along the top edge — reads as a lit bevel */ content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.22), transparent); } .panel:hover { border-color: var(--line-strong); background: var(--surface-hover); transform: translateY(-4px); } .panel--accent:hover { border-color: rgba(124, 140, 248, 0.45); } .panel__num { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--text-muted); } .panel__icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--accent-soft); font-size: 1rem; margin-bottom: 22px; background: linear-gradient(150deg, rgba(124, 140, 248, 0.16), transparent 70%); transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); } .panel:hover .panel__icon { border-color: var(--accent); transform: translateY(-2px) rotate(-4deg); } .panel h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; } .panel p { font-size: 0.92rem; line-height: 1.65; color: var(--text-muted); } /* Isometric card — the always-on 3D tilt */ .iso { transform: perspective(1400px) rotateX(9deg) rotateY(-14deg); transform-style: preserve-3d; box-shadow: 24px 30px 0 -14px rgba(124, 140, 248, 0.10), 44px 56px 0 -22px rgba(124, 140, 248, 0.06), 40px 60px 80px -30px rgba(0, 0, 0, 0.9); transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease); } .iso:hover { transform: perspective(1400px) rotateX(3deg) rotateY(-5deg) translateY(-8px); } .iso--alt { transform: perspective(1400px) rotateX(9deg) rotateY(14deg); box-shadow: -24px 30px 0 -14px rgba(124, 140, 248, 0.10), -44px 56px 0 -22px rgba(124, 140, 248, 0.06), -40px 60px 80px -30px rgba(0, 0, 0, 0.9); } /* Stat block */ .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); } .stat { padding: 26px 0 0; border-right: 1px solid var(--line); padding-right: 20px; } .stat:last-child { border-right: 0; } .stat__value { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -0.04em; color: var(--text); line-height: 1; } .stat__label { margin-top: 9px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } /* Marquee ticker */ .ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 20px 0; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } .ticker__track { display: flex; gap: 56px; width: max-content; animation: ticker-scroll 38s linear infinite; } .ticker__item { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.02em; color: var(--text-muted); white-space: nowrap; } .ticker__item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.6; } @keyframes ticker-scroll { to { transform: translateX(-50%); } } /* Numbered process list */ .steps { border-top: 1px solid var(--line); } .step { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); transition: background 0.35s var(--ease), padding 0.35s var(--ease); } .step:hover { background: var(--surface); } .step__n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; color: transparent; -webkit-text-stroke: 1px var(--line-strong); line-height: 1; transition: -webkit-text-stroke-color 0.35s var(--ease); } .step:hover .step__n { -webkit-text-stroke-color: var(--accent); } .step h3 { font-size: 1.2rem; margin-bottom: 8px; } .step p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.7; max-width: 62ch; } @media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: 10px; } } /* ---------------------------- 8. FORMS ---------------------------------- */ .field { display: block; margin-bottom: 20px; } .field > span { display: block; margin-bottom: 9px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .theme-dark input[type="text"], .theme-dark input[type="email"], .theme-dark input[type="tel"], .theme-dark input[type="number"], .theme-dark select, .theme-dark textarea { width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--line) !important; border-radius: 11px !important; color: var(--text) !important; font-family: var(--font-body); font-size: 0.94rem; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease); } .theme-dark textarea { resize: vertical; min-height: 130px; } /* Fields with an icon tucked inside them carry Tailwind's pl-10 / pr-10 to leave room for it. Those utilities are a single class (0,1,0), so the rule above (0,2,1) wins and the padding collapses back to 16px — putting the placeholder underneath the icon. Restore what the utility asked for. */ .theme-dark input.pl-9, .theme-dark select.pl-9, .theme-dark textarea.pl-9 { padding-left: 2.25rem; } .theme-dark input.pl-10, .theme-dark select.pl-10, .theme-dark textarea.pl-10 { padding-left: 2.5rem; } .theme-dark input.pl-11, .theme-dark select.pl-11, .theme-dark textarea.pl-11 { padding-left: 2.75rem; } .theme-dark input.pl-12, .theme-dark select.pl-12, .theme-dark textarea.pl-12 { padding-left: 3rem; } .theme-dark input.pr-10, .theme-dark select.pr-10, .theme-dark textarea.pr-10 { padding-right: 2.5rem; } .theme-dark input.pr-12, .theme-dark select.pr-12, .theme-dark textarea.pr-12 { padding-right: 3rem; } .theme-dark input::placeholder, .theme-dark textarea::placeholder { color: #5E6572; } .theme-dark input:focus, .theme-dark select:focus, .theme-dark textarea:focus { outline: none; border-color: var(--accent) !important; background: rgba(255, 255, 255, 0.05) !important; box-shadow: 0 0 0 3px rgba(124, 140, 248, 0.13); } .theme-dark select option { background: #101318; color: var(--text); } /* ---------------------------- 9. FOOTER --------------------------------- */ .pfoot { position: relative; background: #060709 !important; border-top: 1px solid var(--line); padding: 84px 0 0; overflow: hidden; } .pfoot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; } @media (max-width: 900px) { .pfoot__grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 560px) { .pfoot__grid { grid-template-columns: 1fr; } } .pfoot h4 { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; } .pfoot ul { list-style: none; padding: 0; margin: 0; } .pfoot li { margin-bottom: 11px; } .pfoot a { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; transition: color 0.25s var(--ease); } .pfoot a:hover { color: var(--accent-soft); } .pfoot__social { display: flex; gap: 10px; margin-top: 24px; } .pfoot__social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--text-muted); transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); } .pfoot__social a:hover { border-color: var(--accent); color: var(--accent-soft); transform: translateY(-2px); } .pfoot__base { margin-top: 64px; padding: 24px 0 30px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.82rem; color: var(--text-muted); } /* Oversized wordmark bleeding off the footer bottom */ .pfoot__word { font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 17vw, 15rem); line-height: 0.78; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.075); text-align: center; margin: 40px 0 -0.14em; user-select: none; pointer-events: none; } /* --------------------- 10. REVEAL / MOTION UTILITIES -------------------- */ /* No scroll-reveal. Everything is painted at full opacity on first render — no fade-in as sections enter the viewport, nothing that reads as the page still loading. This also neutralises AOS and the older bespoke reveal classes that are still present in the inherited markup. */ .rise, .rise.is-in, .theme-dark [data-aos], .theme-dark [data-aos].aos-init, .theme-dark .reveal-3d, .theme-dark .scroll-animate, .theme-dark .animate-fade-in { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; visibility: visible !important; } @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } .theme-dark *, .theme-dark *::before, .theme-dark *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 11. BRIDGE — retire the old emerald / teal / orange / light-surface look on pages whose markup still carries those utility classes. ========================================================================== */ /* Surfaces */ .theme-dark .bg-white, .theme-dark .bg-gray-50, .theme-dark .bg-gray-100, .theme-dark .bg-slate-50, .theme-dark .bg-slate-100, .theme-dark .bg-light { background-color: var(--bg-raised) !important; } .theme-dark .bg-black, .theme-dark .bg-gray-900, .theme-dark .bg-slate-900, .theme-dark .bg-dark { background-color: var(--bg) !important; } .theme-dark .bg-white\/95, .theme-dark .bg-white\/90, .theme-dark .bg-white\/80, .theme-dark .bg-white\/70, .theme-dark .bg-white\/50 { background-color: var(--surface) !important; } /* Any lingering brand-coloured fill becomes the accent */ .theme-dark [class*="bg-emerald-"], .theme-dark [class*="bg-teal-"], .theme-dark [class*="bg-green-"], .theme-dark [class*="bg-orange-"], .theme-dark [class*="bg-amber-"], .theme-dark [class*="bg-lime-"] { background-color: rgba(124, 140, 248, 0.14) !important; } /* ---- Gradients -------------------------------------------------------- */ /* Default: every inherited gradient surface (hero bands, cards, banners) collapses to obsidian with the faintest accent wash. Nothing shouts. */ .theme-dark [class*="bg-gradient-to"] { --tw-gradient-from: rgba(124, 140, 248, 0.13) !important; --tw-gradient-to: rgba(124, 140, 248, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; background-color: var(--bg) !important; } /* Exception: real call-to-action controls keep the full accent ramp. */ .theme-dark a[class*="bg-gradient-to"], .theme-dark button[class*="bg-gradient-to"] { /* The label used to be near-black on a ramp that ends deep violet, so it disappeared at the dark end. White label, deeper ramp. */ --tw-gradient-from: var(--accent) !important; --tw-gradient-to: var(--accent-deep) !important; --tw-gradient-stops: var(--accent), var(--accent-deep) !important; background-color: transparent !important; color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .22); border-color: transparent !important; } .theme-dark a[class*="bg-gradient-to"] *, .theme-dark button[class*="bg-gradient-to"] * { color: #FFFFFF !important; } /* Exception: gradient-clipped headline text stays legible and accented. */ .theme-dark .bg-clip-text { --tw-gradient-from: var(--accent-soft) !important; --tw-gradient-to: var(--accent) !important; --tw-gradient-stops: var(--accent-soft), var(--accent) !important; background-color: transparent !important; } /* Small round icon tiles keep a readable plate rather than vanishing. */ .theme-dark div[class*="bg-gradient-to"].rounded-full, .theme-dark div[class*="bg-gradient-to"].rounded-lg, .theme-dark div[class*="bg-gradient-to"].rounded-xl, .theme-dark span[class*="bg-gradient-to"].rounded-full { background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--line); } /* Text */ .theme-dark .text-gray-900, .theme-dark .text-gray-800, .theme-dark .text-slate-900, .theme-dark .text-black { color: var(--text) !important; } .theme-dark .text-gray-700, .theme-dark .text-gray-600, .theme-dark .text-slate-600 { color: var(--text-dim) !important; } .theme-dark .text-gray-500, .theme-dark .text-gray-400 { color: var(--text-muted) !important; } .theme-dark [class*="text-emerald-"], .theme-dark [class*="text-teal-"], .theme-dark [class*="text-green-"], .theme-dark [class*="text-orange-"], .theme-dark [class*="text-amber-"], .theme-dark [class*="text-lime-"] { color: var(--accent-soft) !important; } /* Borders + shadows */ .theme-dark [class*="border-gray-"], .theme-dark [class*="border-slate-"], .theme-dark [class*="border-white"], .theme-dark [class*="border-emerald-"], .theme-dark [class*="border-teal-"], .theme-dark [class*="border-green-"], .theme-dark [class*="border-orange-"] { border-color: var(--line) !important; } .theme-dark .shadow-lg, .theme-dark .shadow-xl, .theme-dark .shadow-2xl, .theme-dark .shadow-md { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9) !important; } /* Old bespoke components from style.css that assumed a light page */ .theme-dark .footer-enhanced { background: #060709 !important; } .theme-dark .navbar-enhanced, .theme-dark nav.scrolled { background: rgba(8, 9, 11, 0.82) !important; border-bottom: 1px solid var(--line) !important; } .theme-dark .nav-new-badge { background: transparent !important; color: var(--accent-soft) !important; border: 1px solid rgba(124, 140, 248, 0.4); } /* Cards inherited from the old markup get the panel treatment */ .theme-dark .bg-white.rounded-2xl, .theme-dark .bg-white.rounded-xl, .theme-dark .bg-white.rounded-3xl { background: var(--surface) !important; border: 1px solid var(--line) !important; } /* `theme-strict` is set on every page except the three ad-platform pages, where Facebook blue / Google red / YouTube red are deliberate branding. Everywhere else the palette stays monochrome + one accent. */ .theme-strict [class*="text-red-"], .theme-strict [class*="text-blue-"], .theme-strict [class*="text-purple-"], .theme-strict [class*="text-indigo-"], .theme-strict [class*="text-pink-"], .theme-strict [class*="text-violet-"], .theme-strict [class*="text-cyan-"], .theme-strict [class*="text-yellow-"] { color: var(--accent-soft) !important; } .theme-strict [class*="bg-red-"], .theme-strict [class*="bg-blue-"], .theme-strict [class*="bg-purple-"], .theme-strict [class*="bg-indigo-"], .theme-strict [class*="bg-pink-"] { background-color: rgba(124, 140, 248, 0.14) !important; } /* Full-width bands go transparent so the fixed wireframe backdrop reads through the page instead of being buried under opaque section fills. */ .theme-dark section, .theme-dark section[class*="bg-"], .theme-dark section[class*="bg-gradient-to"], .theme-dark main { background-color: transparent !important; } /* Tighten the inherited vertical rhythm — the old light layout used very generous padding that reads as dead space on a dark page. */ .theme-strict .py-32 { padding-block: clamp(48px, 6vw, 80px) !important; } .theme-strict .py-20 { padding-block: clamp(40px, 5vw, 64px) !important; } .theme-strict .py-16 { padding-block: clamp(34px, 4vw, 52px) !important; } .theme-strict .mb-16 { margin-bottom: 34px !important; } .theme-strict .mb-12 { margin-bottom: 28px !important; } .theme-strict .mt-12 { margin-top: 28px !important; } .theme-strict .mb-9, .theme-strict .mb-8 { margin-bottom: 22px !important; } /* Images that were drawn for a white page shouldn't glare on obsidian */ .theme-dark main img:not([src$=".svg"]) { filter: saturate(0.85) brightness(0.94); } /* ============================================================ PHONE RHYTHM The Tailwind section padding (py-32 = 128px, py-20 = 80px top and bottom) was written for desktop and leaves huge empty bands on a phone. Scaled down below 768px only. ============================================================ */ @media (max-width: 767px) { body .py-32 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; } body .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; } body .py-20 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; } body .py-16 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; } body .mb-16 { margin-bottom: 2rem !important; } body .mb-12 { margin-bottom: 1.75rem !important; } body .mb-8 { margin-bottom: 1.25rem !important; } body .mt-16 { margin-top: 2rem !important; } body .gap-16 { gap: 1.75rem !important; } body .gap-12 { gap: 1.5rem !important; } body .gap-8 { gap: 1rem !important; } body .space-y-8 > * + * { margin-top: 1.25rem !important; } body .space-y-6 > * + * { margin-top: 1rem !important; } }