/* ========================================================================== EIFERONE STUDIOS — style.css Shared design tokens + components across all pages. Theme: "the grade" — a dark, cinematic surface, the way footage is actually looked at. The studio mark's two-tone split supplies nearly all the saturated colour on the page, so red and blue read as brand rather than decoration. Signature motif: "the fold" — a turned corner echoing the mark's own folded chevron, used on cards, bands, and dividers. ========================================================================== */ /* ---------- fonts ---------- Loaded via tags in each page's (paired with preconnect hints) rather than @import, so the font requests start as early as possible instead of after the CSS file itself loads. */ /* ---------- design tokens ---------- */ :root{ /* brand — the mark's own two tones, plus lifted variants that hold their chroma against a dark surface, and a violet that lets the two meet in a gradient instead of a hard seam. */ --red-core: #E6070F; --red: #FF3A44; --red-deep: #B00509; --blue-core: #0077C9; --blue: #3AA0FF; --blue-deep: #005895; --violet: #7A5CFF; --red-glow: rgba(255,58,68,.20); --blue-glow: rgba(58,160,255,.20); --violet-glow: rgba(122,92,255,.16); /* the mark's literal split — hard-edged, used for "the fold" */ --grad-fold: linear-gradient(100deg, var(--red-core) 0 42%, var(--blue-core) 42% 100%); /* the same two tones, bridged — used for fills, glows, and type */ --grad-brand: linear-gradient(100deg, var(--red) 0%, var(--violet) 52%, var(--blue) 100%); --grad-line: linear-gradient(90deg, var(--red), var(--violet) 50%, var(--blue)); /* ink — text on the dark surface */ --ink: #F3F5F9; --ink-soft: #A5ABBA; --ink-faint: #737A8A; --white: #FFFFFF; /* surfaces — the "paper" names are kept so the page-level tints already set inline on section elements keep working. */ --paper: #0A0C11; /* page ground */ --paper-2: #11141B; /* raised band */ --paper-3: #1B202A; /* chips, wells */ --paper-blue: #0A1220; /* blue-graded band */ --paper-red: #150C10; /* red-graded band */ --surface: #12161E; /* cards */ --surface-2: #171C26; /* cards, hover */ /* deepest band — footer, contact panel, philosophy */ --night: #06080C; --night-2: #0E1119; --night-3: #1A1F29; --night-text: #F3F5F9; --night-soft: #9BA1B0; --night-line: rgba(255,255,255,0.09); /* lines */ --line: rgba(255,255,255,0.10); --line-soft: rgba(255,255,255,0.055); /* elevation */ --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 14px 34px rgba(0,0,0,.45); --shadow-3: 0 28px 60px rgba(0,0,0,.55); /* type */ --f-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif; --f-body: 'Switzer', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* scale */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 2.5rem; --s8: 3rem; --s9: 4rem; --s10: 5rem; --s11: 6.5rem; --s12: 8rem; --max: 1240px; --pad: clamp(1.25rem, 4.5vw, 3rem); --header-h: 84px; --ease: cubic-bezier(.16,1,.3,1); --fast: .18s; --mid: .38s; --slow: .7s; } /* ---------- reset ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--paper); color-scheme:dark; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } body{ font-family:var(--f-body); background:var(--paper); color:var(--ink); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; } /* Filmic grain — one fixed layer over the whole page, kept faint enough to read as texture rather than as noise. */ body::after{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; } button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; } input,textarea,select{ font:inherit; color:inherit; } h1,h2,h3,h4{ font-family:var(--f-display); font-weight:500; line-height:1.08; letter-spacing:-.015em; color:var(--ink); } :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; } ::selection{ background:rgba(58,160,255,.28); color:var(--white); } /* scrollbar */ *{ scrollbar-color:var(--night-3) transparent; scrollbar-width:thin; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:var(--paper); } ::-webkit-scrollbar-thumb{ background:var(--night-3); border-radius:10px; border:2px solid var(--paper); } ::-webkit-scrollbar-thumb:hover{ background:#2C323E; } /* ---------- layout helpers ---------- */ .wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; } .section{ padding-block:var(--s11); } .section--tight{ padding-block:var(--s9); } @media (max-width:720px){ .section{ padding-block:var(--s9); } .section--tight{ padding-block:var(--s7); } } /* Tinted bands get a soft vignette, so the colour grade falls off toward the edges instead of sitting on the page as a flat rectangle. Matched on the inline background the pages already set. */ section[style*="--paper-blue"], section[style*="--paper-red"]{ position:relative; overflow:hidden; } section[style*="--paper-blue"]::before, section[style*="--paper-red"]::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; } section[style*="--paper-blue"]::before{ background:radial-gradient(120% 90% at 15% 0%, var(--blue-glow), transparent 60%); } section[style*="--paper-red"]::before{ background:radial-gradient(120% 90% at 85% 0%, var(--red-glow), transparent 60%); } .eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-body); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:var(--s4); } .eyebrow::before{ content:''; width:15px; height:10px; flex:none; background:var(--grad-fold); clip-path:polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 30% 50%); } .eyebrow--light{ color:var(--night-soft); } .section-head{ max-width:640px; margin-bottom:var(--s8); } .section-head.center{ margin-inline:auto; text-align:center; } .section-title{ font-size:clamp(1.85rem, 3.4vw, 2.7rem); margin-bottom:var(--s3); } .section-lead{ color:var(--ink-soft); font-size:1.05rem; max-width:56ch; } .section-head.center .section-lead{ margin-inline:auto; } .italic{ font-style:italic; } .text-blue{ color:var(--blue); } .text-red{ color:var(--red); } /* Gradient type — reserved for the one emphasised phrase in a block. */ .grad-text{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } hr.rule{ border:0; height:1px; background:var(--line); margin-block:var(--s8); } /* ---------- buttons ---------- */ .btn{ position:relative; display:inline-flex; align-items:center; gap:.55rem; padding:.95rem 1.7rem; font-weight:600; font-size:.95rem; border-radius:3px; overflow:hidden; transition:transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease); white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn > *{ position:relative; z-index:1; } .btn .arrow{ transition:transform var(--fast) var(--ease); } .btn:hover .arrow{ transform:translateX(4px); } /* a light sweep across the fill on hover */ .btn::after{ content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%); transform:translateX(-120%); transition:transform .6s var(--ease); } .btn:hover::after{ transform:translateX(120%); } .btn-primary{ background:var(--grad-brand); color:var(--white); box-shadow:0 8px 24px rgba(122,92,255,.24); } .btn-primary:hover{ box-shadow:0 14px 34px rgba(122,92,255,.36); } .btn-outline{ border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.02); } .btn-outline:hover{ border-color:rgba(58,160,255,.55); background:rgba(58,160,255,.10); color:var(--white); } .btn-on-dark{ border:1px solid var(--night-line); color:var(--night-text); } .btn-on-dark:hover{ border-color:var(--blue); color:var(--white); background:rgba(58,160,255,.14); } .btn-red{ background:linear-gradient(100deg, var(--red) 0%, var(--red-deep) 100%); color:var(--white); box-shadow:0 8px 24px rgba(255,58,68,.26); } .btn-red:hover{ box-shadow:0 14px 34px rgba(255,58,68,.38); } .btn-block{ width:100%; justify-content:center; } /* ---------- brand spine ---------- The mark's two-tone split pinned to the top of every page — doubling as a scroll scrubber, which is the same gesture the studio spends its days dragging. --scroll is set by main.js; without JS the bar simply sits full. */ .brand-spine{ position:fixed; top:0; left:0; right:0; z-index:200; height:3px; width:100%; background:rgba(255,255,255,.06); } .brand-spine::after{ content:''; display:block; height:100%; width:100%; background:var(--grad-line); transform:scaleX(var(--scroll, 1)); transform-origin:0 50%; box-shadow:0 0 14px rgba(122,92,255,.55); } /* ---------- header ---------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(10,12,17,.72); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid transparent; transition:background var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease); } .site-header.is-scrolled{ background:rgba(10,12,17,.92); border-bottom-color:var(--line-soft); box-shadow:0 12px 30px rgba(0,0,0,.35); } .site-header .wrap{ position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-h); } .brand{ display:flex; align-items:center; transition:opacity var(--fast) var(--ease); } .brand:hover{ opacity:.82; } /* The lockup stacks the mark over the wordmark, so it needs more height than a single-line logo before the wordmark is comfortably readable. */ .brand img{ height:44px; width:auto; } .main-nav{ display:flex; align-items:center; gap:var(--s7); } .main-nav ul{ display:flex; gap:var(--s6); } .main-nav a{ font-size:.92rem; font-weight:500; color:var(--ink-soft); position:relative; padding-block:.3rem; transition:color var(--fast) var(--ease); } .main-nav a:hover{ color:var(--ink); } .main-nav a.active{ color:var(--ink); } .main-nav ul a::after{ content:''; position:absolute; left:0; right:0; bottom:-5px; height:2px; background:var(--grad-line); border-radius:2px; transform:scaleX(0); transform-origin:0 50%; transition:transform var(--mid) var(--ease); } .main-nav ul a:hover::after{ transform:scaleX(1); } .main-nav ul a.active::after{ transform:scaleX(1); } .header-cta{ display:flex; align-items:center; gap:var(--s5); } .nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; padding:.4rem 0; } .nav-toggle span, .nav-toggle i{ height:2px; background:var(--ink); width:100%; display:block; border-radius:2px; transition:transform var(--fast) var(--ease), opacity var(--fast) var(--ease); } .nav-toggle.is-open span:nth-child(1), .nav-toggle.is-open i:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2), .nav-toggle.is-open i:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3), .nav-toggle.is-open i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width:920px){ .main-nav{ position:fixed; inset:var(--header-h) 0 0 0; background:var(--paper); flex-direction:column; align-items:flex-start; padding:var(--s7) var(--pad); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease); overflow-y:auto; z-index:99; } .main-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; } .main-nav ul{ flex-direction:column; gap:var(--s5); width:100%; } .main-nav ul a{ font-size:1.5rem; font-family:var(--f-display); } .main-nav ul a::after{ bottom:-2px; } .main-nav .header-cta{ margin-top:var(--s6); } .nav-toggle{ display:flex; position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); z-index:10; } } /* ---------- footer ---------- */ .site-footer{ background:var(--night); color:var(--night-soft); position:relative; overflow:hidden; } .site-footer::before{ content:''; position:absolute; inset:0 0 auto 0; height:1px; background:var(--grad-line); opacity:.55; } .site-footer::after{ content:''; position:absolute; left:50%; bottom:-320px; width:760px; height:520px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(circle, var(--violet-glow), transparent 65%); } .footer-top{ padding-block:var(--s9); display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:var(--s8); border-bottom:1px solid var(--night-line); } .footer-brand img{ height:46px; width:auto; margin-bottom:var(--s4); } .footer-brand p{ max-width:34ch; font-size:.92rem; line-height:1.65; } .footer-col h4{ font-family:var(--f-body); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--night-text); margin-bottom:var(--s4); } .footer-col ul{ display:flex; flex-direction:column; gap:.65rem; } .footer-col a{ font-size:.92rem; display:inline-block; transition:color var(--fast) var(--ease), transform var(--fast) var(--ease); } .footer-col a:hover{ color:var(--night-text); transform:translateX(3px); } .footer-bottom{ padding-block:var(--s5); display:flex; align-items:center; justify-content:space-between; font-size:.82rem; flex-wrap:wrap; gap:var(--s3); } .footer-social{ display:flex; gap:var(--s4); } .footer-social a{ transition:color var(--fast) var(--ease); } .footer-social a:hover{ color:var(--blue); } @media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; row-gap:var(--s7); } } @media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } } /* ========================================================================== HERO ========================================================================== */ .hero{ padding-block:var(--s11) var(--s10); position:relative; overflow:hidden; } .hero::before, .hero::after{ content:''; position:absolute; z-index:0; pointer-events:none; border-radius:50%; } .hero::before{ width:720px; height:720px; left:-240px; top:-300px; background:radial-gradient(circle, var(--red-glow), rgba(230,7,15,0) 68%); animation:drift-a 22s ease-in-out infinite alternate; } .hero::after{ width:780px; height:780px; right:-260px; bottom:-340px; background:radial-gradient(circle, var(--blue-glow), rgba(0,119,201,0) 68%); animation:drift-b 26s ease-in-out infinite alternate; } /* A third, violet light source, so the two brand tones don't read as a flat two-colour wash across the top of the page. */ .hero-glow{ position:absolute; z-index:0; pointer-events:none; width:560px; height:560px; left:34%; top:-200px; border-radius:50%; background:radial-gradient(circle, var(--violet-glow), transparent 65%); animation:drift-a 30s ease-in-out infinite alternate-reverse; } @keyframes drift-a{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(60px,40px,0) scale(1.12); } } @keyframes drift-b{ from{ transform:translate3d(0,0,0) scale(1.08); } to{ transform:translate3d(-50px,-40px,0) scale(1); } } .hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:var(--s9); align-items:center; } .hero-kicker{ margin-bottom:var(--s5); } .hero h1{ font-size:clamp(2.7rem, 5.8vw, 5rem); margin-bottom:var(--s5); letter-spacing:-.03em; } .hero h1 em{ font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .hero-lead{ font-size:1.15rem; color:var(--ink-soft); max-width:52ch; margin-bottom:var(--s6); } .hero-ctas{ display:flex; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s7); } .hero-note{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--ink-faint); } .hero-note .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); animation:pulse 2.6s var(--ease) infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(58,160,255,.55); } 70%{ box-shadow:0 0 0 9px rgba(58,160,255,0); } 100%{ box-shadow:0 0 0 0 rgba(58,160,255,0); } } /* ---- hero visual: "the deck" ---- Two of the studio's own deliverable shapes — a 16:9 long-form edit mid-timeline, a 9:16 short sitting ready to play — fanned like proofs on a light table and sealed with the mark where they meet. */ .hero-mark{ position:relative; display:flex; align-items:center; justify-content:center; } .hero-deck{ position:relative; width:100%; max-width:440px; height:clamp(300px, 30vw, 400px); } .deck-frame{ position:absolute; border-radius:11px; background:linear-gradient(160deg, var(--night-3), var(--night-2) 60%); border:1px solid var(--night-line); box-shadow:var(--shadow-3); overflow:hidden; transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease); } /* a faint top highlight, like light catching a screen bezel */ .deck-frame::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%); } .deck-frame--wide{ width:70%; aspect-ratio:16/9; left:0; top:6%; z-index:1; animation:deck-wide-in .85s var(--ease) .15s both; } .deck-frame--tall{ width:33%; aspect-ratio:9/16; right:2%; bottom:0; z-index:2; animation:deck-tall-in .85s var(--ease) .34s both; } .hero-deck:hover .deck-frame--wide{ transform:rotate(-2deg) translateY(-6px); box-shadow:0 36px 70px rgba(0,0,0,.6), 0 0 46px rgba(255,58,68,.16); } .hero-deck:hover .deck-frame--tall{ transform:rotate(3deg) translateY(-8px); box-shadow:0 36px 70px rgba(0,0,0,.6), 0 0 46px rgba(58,160,255,.18); } .deck-tag{ position:absolute; top:10px; left:10px; z-index:3; font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--night-text); background:rgba(255,255,255,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:.35em .6em; border-radius:4px; max-width:calc(100% - 20px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .deck-fold{ position:absolute; top:0; right:0; z-index:3; width:22px; height:22px; clip-path:polygon(100% 0, 0 0, 100% 100%); } .deck-fold--red{ background:linear-gradient(200deg, var(--red), var(--red-deep)); } .deck-fold--blue{ background:linear-gradient(200deg, var(--blue), var(--blue-deep)); } .deck-canvas{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; padding:14px; } .deck-canvas--center{ align-items:center; justify-content:center; padding:0; } .deck-scrubber{ position:relative; width:100%; height:5px; border-radius:3px; background:rgba(255,255,255,.16); } .deck-progress{ position:absolute; inset:0; width:58%; border-radius:3px; background:var(--grad-line); box-shadow:0 0 12px rgba(122,92,255,.5); } .deck-playhead{ position:absolute; left:58%; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--white); box-shadow:0 0 0 4px rgba(255,255,255,.18), 0 0 14px rgba(255,255,255,.6); } .deck-play{ width:38%; aspect-ratio:1/1; border-radius:50%; background:rgba(255,255,255,.96); display:flex; align-items:center; justify-content:center; box-shadow:0 0 32px rgba(58,160,255,.35); } .deck-play i{ width:0; height:0; margin-left:12%; border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent var(--blue-core); } .deck-badge{ position:absolute; left:64%; top:44%; z-index:4; width:60px; height:60px; border-radius:50%; background:var(--white); box-shadow:0 16px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; animation:deck-badge-in .6s var(--ease) .68s both; } .deck-badge img{ width:56%; } @keyframes deck-wide-in{ from{ opacity:0; transform:translateY(20px) rotate(-1deg) scale(.94); } to{ opacity:1; transform:translateY(0) rotate(-6deg) scale(1); } } @keyframes deck-tall-in{ from{ opacity:0; transform:translateY(20px) rotate(11deg) scale(.9); } to{ opacity:1; transform:translateY(0) rotate(7deg) scale(1); } } @keyframes deck-badge-in{ from{ opacity:0; transform:translate(-50%,-50%) scale(.5); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } } @media (max-width:920px){ .hero .wrap{ grid-template-columns:1fr; gap:var(--s8); } .hero-deck{ max-width:340px; height:clamp(240px, 62vw, 300px); margin-inline:auto; } .hero::before, .hero::after{ width:420px; height:420px; } .hero::before{ left:-160px; top:-180px; } .hero::after{ right:-160px; bottom:-180px; } .hero-glow{ width:340px; height:340px; left:15%; top:-140px; } } /* ========================================================================== DARK BAND / PHILOSOPHY ========================================================================== */ .band-dark{ background: radial-gradient(90% 120% at 8% 0%, rgba(230,7,15,.10), transparent 55%), radial-gradient(90% 120% at 95% 100%, rgba(0,119,201,.12), transparent 55%), var(--night); color:var(--night-text); position:relative; overflow:hidden; } /* hairline rules top and bottom, in the brand gradient */ .band-dark::before, .band-dark::after{ content:''; position:absolute; left:0; right:0; height:1px; z-index:1; background:var(--grad-line); opacity:.5; } .band-dark::before{ top:0; } .band-dark::after{ bottom:0; } .band-dark .section-lead{ color:var(--night-soft); } /* The statement is short and the points column is tall, so centring the statement keeps it reading as a pull-quote against the list rather than stranding it at the top of a mostly empty column. */ .philosophy-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s9); align-items:center; } .philosophy-statement{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.8rem, 3vw, 2.5rem); line-height:1.22; } .philosophy-statement em{ font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .philosophy-points{ display:grid; gap:var(--s6); } .philosophy-point{ display:flex; gap:var(--s4); padding-left:var(--s4); border-left:1px solid var(--night-line); transition:border-color var(--mid) var(--ease); } .philosophy-point:hover{ border-left-color:rgba(58,160,255,.5); } .philosophy-point .mark{ flex:none; width:26px; height:20px; margin-top:.3rem; background:var(--grad-fold); clip-path:polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 30% 50%); } .philosophy-point h4{ font-size:1.05rem; margin-bottom:.35rem; color:var(--night-text); } .philosophy-point p{ font-size:.92rem; color:var(--night-soft); } @media (max-width:860px){ .philosophy-grid{ grid-template-columns:1fr; gap:var(--s7); } } /* ========================================================================== CARDS — "the fold" ========================================================================== */ .card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s5); } .card-grid.cols-4{ grid-template-columns:repeat(4, 1fr); } .card-grid.cols-2{ grid-template-columns:repeat(2, 1fr); } .fold-card{ position:relative; background:linear-gradient(165deg, var(--surface-2), var(--surface) 55%); border:1px solid var(--line); border-radius:6px; padding:var(--s6) var(--s5) var(--s5); transition:transform var(--mid) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease); overflow:hidden; isolation:isolate; } /* the fold: a gradient corner, dulled until hover */ .fold-card::before{ content:''; position:absolute; top:0; right:0; width:40px; height:40px; z-index:1; background:var(--grad-brand); clip-path:polygon(100% 0, 0 0, 100% 100%); opacity:.34; transition:opacity var(--mid) var(--ease); } /* the crease — a smaller triangle in the card's own surface */ .fold-card::after{ content:''; position:absolute; top:0; right:0; width:18px; height:18px; z-index:2; background:var(--surface-2); clip-path:polygon(100% 0, 0 0, 100% 100%); } .fold-card:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.20); box-shadow:var(--shadow-2), 0 0 40px rgba(122,92,255,.10); } .fold-card:hover::before{ opacity:1; } .fold-card .num{ font-family:var(--f-display); font-style:italic; font-size:.9rem; margin-bottom:var(--s4); background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .fold-card h3{ font-size:1.2rem; margin-bottom:.6rem; } .fold-card p{ font-size:.92rem; color:var(--ink-soft); line-height:1.6; } .fold-card .tag{ display:inline-block; margin-top:var(--s4); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); transition:color var(--fast) var(--ease), transform var(--fast) var(--ease); } .fold-card .tag:hover{ color:var(--white); transform:translateX(3px); } @media (max-width:980px){ .card-grid, .card-grid.cols-4{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:620px){ .card-grid, .card-grid.cols-4, .card-grid.cols-2{ grid-template-columns:1fr; } } /* ========================================================================== PROCESS ========================================================================== */ .process-list{ display:grid; gap:0; position:relative; } .process-item{ position:relative; display:grid; grid-template-columns:110px 1fr; gap:var(--s6); padding-block:var(--s6); border-top:1px solid var(--line); align-items:start; } /* the rule above each step draws itself in as you arrive on it */ .process-item::before{ content:''; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--grad-line); transition:width var(--slow) var(--ease); } .process-item:hover::before{ width:100%; } .process-item:last-child{ border-bottom:1px solid var(--line); } .process-item .step-num{ font-family:var(--f-display); font-style:italic; font-size:1.9rem; color:var(--ink-faint); transition:color var(--mid) var(--ease); } .process-item:hover .step-num{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .process-item h3{ font-size:1.22rem; margin-bottom:.5rem; } .process-item p{ color:var(--ink-soft); max-width:60ch; } @media (max-width:640px){ .process-item{ grid-template-columns:1fr; gap:var(--s2); } } /* ========================================================================== WHO WE WORK WITH / SPLIT LIST ========================================================================== */ .split-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); } .split-item{ position:relative; padding:var(--s6) var(--s5); border:1px solid var(--line); border-radius:6px; background:linear-gradient(165deg, var(--surface-2), var(--surface) 55%); overflow:hidden; transition:transform var(--mid) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease); } .split-item::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad-line); transform:scaleX(0); transform-origin:0 50%; transition:transform var(--mid) var(--ease); } .split-item:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.18); box-shadow:var(--shadow-2); } .split-item:hover::before{ transform:scaleX(1); } .split-item h3{ font-size:1.12rem; margin-bottom:var(--s3); display:flex; align-items:center; gap:.6rem; } .split-item h3 .chev{ color:var(--blue); font-family:var(--f-display); font-style:italic; } .split-item p{ color:var(--ink-soft); font-size:.92rem; } @media (max-width:860px){ .split-list{ grid-template-columns:1fr; } } /* ========================================================================== CTA BANNER ========================================================================== */ .cta-banner{ background: radial-gradient(80% 140% at 12% 20%, rgba(230,7,15,.22), transparent 58%), radial-gradient(80% 140% at 88% 90%, rgba(0,119,201,.26), transparent 58%), linear-gradient(120deg, #0E1119, #141826); color:var(--white); padding:var(--s10) var(--pad); position:relative; overflow:hidden; border-block:1px solid var(--line-soft); } .cta-banner .wrap{ max-width:var(--max); margin-inline:auto; padding:0; display:flex; align-items:center; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; } .cta-banner h2{ font-size:clamp(1.8rem,3.1vw,2.5rem); max-width:22ch; } .cta-banner .fold-corner{ position:absolute; top:0; right:0; width:110px; height:110px; z-index:1; background:var(--grad-brand); clip-path:polygon(100% 0, 0 0, 100% 100%); opacity:.9; } /* ========================================================================== FAQ ACCORDION ========================================================================== */ .faq-list{ border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); transition:background var(--fast) var(--ease); } .faq-item:hover{ background:rgba(255,255,255,.02); } .faq-item.is-open{ background:rgba(255,255,255,.03); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:var(--s5) var(--s4) var(--s5) 0; text-align:left; font-family:var(--f-display); font-size:1.1rem; font-weight:500; gap:var(--s5); transition:color var(--fast) var(--ease), padding-left var(--mid) var(--ease); } .faq-item:hover .faq-q, .faq-item.is-open .faq-q{ padding-left:var(--s3); } .faq-q .plus{ flex:none; width:22px; height:22px; position:relative; } .faq-q .plus::before,.faq-q .plus::after{ content:''; position:absolute; background:var(--blue); transition:transform var(--fast) var(--ease), opacity var(--fast) var(--ease), background var(--fast) var(--ease); } .faq-q .plus::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); } .faq-q .plus::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); } .faq-item.is-open .plus::before{ background:var(--red); } .faq-item.is-open .plus::after{ opacity:0; transform:translateX(-50%) rotate(90deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height var(--mid) var(--ease); } .faq-a p{ color:var(--ink-soft); padding:0 var(--s4) var(--s5) 0; max-width:68ch; font-size:.95rem; } .faq-item.is-open .faq-a{ max-height:500px; } /* ========================================================================== PRICING FACTORS ========================================================================== */ .factor-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5) var(--s7); } .factor-item{ display:flex; gap:var(--s4); padding-block:var(--s4); border-top:1px solid var(--line); } .factor-item .chip{ flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:4px; background:var(--surface); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-style:italic; color:var(--blue); font-size:.95rem; transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .factor-item:hover .chip{ border-color:rgba(58,160,255,.5); color:var(--white); box-shadow:0 0 22px rgba(58,160,255,.20); } .factor-item h4{ font-size:1rem; margin-bottom:.3rem; } .factor-item p{ font-size:.88rem; color:var(--ink-soft); } @media (max-width:760px){ .factor-list{ grid-template-columns:1fr; } } /* ========================================================================== QUOTE / STATEMENT BLOCK ========================================================================== */ .statement{ max-width:820px; font-family:var(--f-display); font-weight:500; font-size:clamp(1.55rem, 2.8vw, 2.2rem); line-height:1.3; color:var(--ink); } .statement em{ font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* ========================================================================== PILLARS (about page) ========================================================================== */ .pillar-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s6) var(--s7); } .pillar{ position:relative; border-top:1px solid var(--line); padding-top:var(--s5); } .pillar::before{ content:''; position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--grad-line); transition:width var(--slow) var(--ease); } .pillar:hover::before{ width:64px; } .pillar .pillar-index{ font-family:var(--f-display); font-style:italic; color:var(--ink-faint); font-size:.9rem; margin-bottom:var(--s3); } .pillar h3{ font-size:1.32rem; margin-bottom:var(--s3); } .pillar p{ color:var(--ink-soft); } @media (max-width:760px){ .pillar-list{ grid-template-columns:1fr; } } /* ========================================================================== CONTACT ========================================================================== */ .contact-grid{ display:grid; grid-template-columns:1fr .82fr; gap:var(--s9); align-items:start; } .field{ margin-bottom:var(--s5); } .field label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.55rem; } .field input, .field select, .field textarea{ width:100%; padding:.95rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:4px; color:var(--ink); transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease); } .field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); } .field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(255,255,255,.18); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); background:var(--surface-2); box-shadow:0 0 0 3px rgba(58,160,255,.15); } .field textarea{ resize:vertical; min-height:130px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); } @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } } .form-note{ font-size:.82rem; color:var(--ink-faint); margin-top:var(--s3); } .form-status{ display:none; margin-top:var(--s5); padding:var(--s4) var(--s5); border:1px solid var(--line); border-radius:4px; background:var(--surface); font-size:.92rem; } .form-status.is-visible{ display:block; } .contact-side{ background: radial-gradient(90% 60% at 100% 0%, rgba(0,119,201,.18), transparent 60%), var(--night); color:var(--night-text); padding:var(--s7); position:relative; overflow:hidden; border:1px solid var(--night-line); border-radius:6px; } .contact-side::before{ content:''; position:absolute; top:0; right:0; width:64px; height:64px; background:var(--grad-brand); clip-path:polygon(100% 0, 0 0, 100% 100%); opacity:.85; } .contact-side h3{ font-size:1.35rem; margin-bottom:var(--s5); } .contact-line{ display:block; padding-block:var(--s4); border-top:1px solid var(--night-line); } .contact-line:first-of-type{ border-top:none; } .contact-line .label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--night-soft); margin-bottom:.35rem; } .contact-line .value{ font-size:1.02rem; } .contact-line a.value{ transition:color var(--fast) var(--ease); } .contact-line a.value:hover{ color:var(--blue); } @media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; } } /* ========================================================================== MISC PAGE HEADER (non-home pages) ========================================================================== */ .page-hero{ padding-block:var(--s10) var(--s8); position:relative; overflow:hidden; } .page-hero::before, .page-hero::after{ content:''; position:absolute; z-index:0; pointer-events:none; border-radius:50%; } .page-hero::before{ width:480px; height:480px; left:-180px; top:-230px; background:radial-gradient(circle, var(--red-glow), rgba(230,7,15,0) 68%); animation:drift-a 24s ease-in-out infinite alternate; } .page-hero::after{ width:520px; height:520px; right:-200px; bottom:-250px; background:radial-gradient(circle, var(--blue-glow), rgba(0,119,201,0) 68%); animation:drift-b 28s ease-in-out infinite alternate; } .page-hero .wrap{ position:relative; z-index:2; } .page-hero h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); max-width:16ch; letter-spacing:-.025em; } .page-hero .section-lead{ margin-top:var(--s4); } @media (max-width:720px){ .page-hero::before, .page-hero::after{ width:300px; height:300px; } .page-hero::before{ left:-120px; top:-140px; } .page-hero::after{ right:-120px; bottom:-140px; } } /* ========================================================================== REVEAL ON SCROLL Grid children stagger slightly, so a row resolves across rather than snapping in all at once. ========================================================================== */ .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible{ opacity:1; transform:translateY(0); } .card-grid .reveal:nth-child(2), .split-list .reveal:nth-child(2), .philosophy-points .reveal:nth-child(2){ transition-delay:.07s; } .card-grid .reveal:nth-child(3), .split-list .reveal:nth-child(3), .philosophy-points .reveal:nth-child(3){ transition-delay:.14s; } .card-grid .reveal:nth-child(4), .philosophy-points .reveal:nth-child(4){ transition-delay:.21s; }