/* ============================================================ ACTOR — byactor.com Shared stylesheet for index.html + 404.html Type: Google Sans Flex (semibold 600), wght 300–800 + ROND axis Theme: light by default. Add data-theme="dark" to to switch the whole site to the dark palette. ============================================================ */ :root{ /* ---- PORCELAIN ---------------------------------------------------- Muted navy-slate on true white. Almost no colour temperature: the only warmth in the page is a single faint glaze orb. -------------------------------------------------------------------- */ /* --- surfaces --- */ --bg: #FCFCFC; /* true white porcelain */ --bg-soft: #FFFFFF; --ink: #16181D; --ink-dim: #5A5F69; /* 6.6:1 on paper */ --ink-faint: #6E737D; /* 4.6:1 -- passes AA at 11-12px label sizes */ --line: rgba(22,24,29,.14); --line-soft: rgba(22,24,29,.07); --glass: rgba(252,252,252,.76); /* --- accents --- */ --accent: #33547A; /* interactive / text accent -- 7.6:1 */ --accent-2: #B8CBE0; /* pale fill, dark text on top */ --accent-3: #6A88AB; --accent-glow: rgba(51,84,122,.40); --accent-wash: rgba(51,84,122,.09); /* Gradient stays inside the readable range -- the palette's lightest tint would drop the display type to ~1.7:1 against this paper. */ --grad: linear-gradient(100deg,#1E3A57 0%,#33547A 30%,#4E769F 64%,#7393BA 100%); /* --- ambience --- */ --orb-1: rgba(51,84,122,.26); --orb-2: rgba(184,203,224,.52); --orb-3: rgba(198,190,182,.30); /* one faint warm glaze, for depth */ --orb-op: .52; --grain-op: .028; /* porcelain is smooth -- barely any tooth */ --grain-blend: multiply; --vignette: radial-gradient(125% 95% at 50% 0%, transparent 44%, rgba(22,24,29,.075) 100%); --font: "Google Sans Flex", "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ease: cubic-bezier(.19,1,.22,1); --ease-soft: cubic-bezier(.4,0,.15,1); --pad: clamp(20px, 5vw, 72px); --maxw: 1320px; } html[data-theme="dark"]{ --bg: #06070B; --bg-soft: #0B0D13; --ink: #F2EEE7; --ink-dim: #A6A399; --ink-faint: #56544E; --line: rgba(242,238,231,.10); --line-soft: rgba(242,238,231,.055); --glass: rgba(6,7,11,.72); --accent: #C8FF5E; --accent-2: #C8FF5E; --accent-3: #FF7A4D; --accent-glow: rgba(200,255,94,.55); --accent-wash: rgba(200,255,94,.10); --grad: linear-gradient(100deg,#C8FF5E 0%,#EAFFC0 30%,#7C6BFF 62%,#FF7A4D 100%); --orb-1: rgba(124,107,255,.55); --orb-2: rgba(200,255,94,.30); --orb-3: rgba(255,122,77,.22); --orb-op: .5; --grain-op: .045; --grain-blend: overlay; --vignette: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-weight:600; /* semibold, per brand */ font-variation-settings:"ROND" 0; /* roundness axis — animated on brand moments */ letter-spacing:-0.015em; line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.is-locked{ overflow:hidden; } ::selection{ background:var(--accent-2); color:#0A0A0A; } a{ color:inherit; text-decoration:none; } img,svg{ display:block; max-width:100%; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } [hidden]{ display:none !important; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } /* ---------- Layout ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } .section{ position:relative; padding-block:clamp(88px,13vw,180px); } .rule{ height:1px; background:var(--line-soft); border:0; margin:0; } /* ---------- Ambient background ---------- */ .bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:var(--orb-op); will-change:transform; } .orb--1{ width:44vw; height:44vw; left:-8vw; top:-10vw; background:radial-gradient(circle at 30% 30%, var(--orb-1), transparent 65%); animation:drift1 26s var(--ease-soft) infinite alternate; } .orb--2{ width:38vw; height:38vw; right:-6vw; top:18vh; background:radial-gradient(circle at 60% 40%, var(--orb-2), transparent 62%); animation:drift2 32s var(--ease-soft) infinite alternate; } .orb--3{ width:52vw; height:52vw; left:22vw; bottom:-24vw; background:radial-gradient(circle at 50% 50%, var(--orb-3), transparent 60%); animation:drift3 38s var(--ease-soft) infinite alternate; } @keyframes drift1{ to{ transform:translate3d(8vw,6vh,0) scale(1.15); } } @keyframes drift2{ to{ transform:translate3d(-7vw,10vh,0) scale(1.2); } } @keyframes drift3{ to{ transform:translate3d(6vw,-8vh,0) scale(1.1); } } .grid-lines{ position:absolute; inset:0; background-image:linear-gradient(to right, var(--line-soft) 1px, transparent 1px); background-size:calc(100% / 6) 100%; mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); -webkit-mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); } .grain{ position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:var(--grain-op); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 6s steps(6) infinite; mix-blend-mode:var(--grain-blend); } @keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)} } .vignette{ position:fixed; inset:0; z-index:1; pointer-events:none; background:var(--vignette); } main,header,footer{ position:relative; z-index:3; } /* ---------- Cursor ---------- */ .cursor{ position:fixed; top:0; left:0; z-index:60; pointer-events:none; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:1px solid var(--line); opacity:0; transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), opacity .3s; } .cursor.is-on{ opacity:1; } .cursor.is-hot{ width:62px; height:62px; margin:-31px 0 0 -31px; background:var(--accent-wash); border-color:var(--accent); } @media (hover:none),(pointer:coarse){ .cursor{ display:none; } } /* ---------- Scroll progress ---------- */ .progress{ position:fixed; top:0; left:0; height:2px; z-index:55; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--grad); } /* ---------- Loader ---------- */ .loader{ position:fixed; inset:0; z-index:100; background:var(--bg); display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s; } .loader__mark{ font-size:clamp(30px,7vw,64px); letter-spacing:-.05em; display:flex; } .loader__mark span{ opacity:0; transform:translateY(.5em); animation:markIn .7s var(--ease) forwards; } .loader__bar{ position:absolute; bottom:0; left:0; height:2px; width:0%; background:var(--accent); animation:barIn 1.1s var(--ease-soft) forwards; } @keyframes markIn{ from{ font-variation-settings:"ROND" 100; } to{ opacity:1; transform:none; font-variation-settings:"ROND" 0; } } @keyframes barIn{ to{ width:100%; } } .loader.is-done{ opacity:0; visibility:hidden; } /* ---------- Logo ---------- */ .logo{ display:inline-flex; align-items:baseline; gap:.02em; font-size:23px; letter-spacing:-.045em; line-height:1; font-weight:600; font-variation-settings:"ROND" 0; transition:font-variation-settings .55s var(--ease); } .logo:hover{ font-variation-settings:"ROND" 100; } .logo__slash{ color:var(--accent); display:inline-block; /* Pivot at the foot of the glyph, not its middle -- so the slash swings upright in place and its foot stays on the same baseline as ACTOR. -18deg is where this slash goes vertical: its bounding box narrows to the stroke width. */ transform-origin:50% 100%; transition:transform .5s var(--ease); } .logo:hover .logo__slash{ transform:rotate(-18deg); } /* ---------- Header ---------- */ .hdr{ position:fixed; top:0; left:0; right:0; z-index:50; border-bottom:1px solid transparent; transition:background-color .5s var(--ease), backdrop-filter .5s, border-color .5s; } .hdr.is-stuck{ background:var(--glass); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--line); } .hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:74px; padding-block:12px; flex-wrap:wrap; } .nav{ display:flex; align-items:center; gap:clamp(18px,2.6vw,38px); } .nav a{ font-size:13.5px; letter-spacing:-.01em; color:var(--ink-dim); position:relative; padding-block:6px; transition:color .35s var(--ease); } .nav a::after{ content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:100% 50%; transition:transform .45s var(--ease); } .nav a:hover{ color:var(--ink); } .nav a:hover::after{ transform:scaleX(1); transform-origin:0 50%; } @media (max-width:820px){ .nav{ display:none; } } /* ---------- Buttons ---------- */ .btn{ --btn-bg:var(--ink); --btn-fg:var(--bg); position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; background:var(--btn-bg); color:var(--btn-fg); font-size:13.5px; letter-spacing:-.012em; white-space:nowrap; transition:transform .5s var(--ease), color .4s var(--ease); } .btn::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--accent-2); transform:translateY(101%); transition:transform .55s var(--ease); } .btn:hover{ color:#0A0A0A; } .btn:hover::before{ transform:translateY(0); } .btn__arrow{ transition:transform .5s var(--ease); } .btn:hover .btn__arrow{ transform:translateX(4px); } .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); border:1px solid var(--line); } /* ---------- Reveal ---------- */ .rv{ opacity:0; transform:translateY(28px); transition:opacity .95s var(--ease), transform .95s var(--ease); } .rv.in{ opacity:1; transform:none; } .rv[data-d="1"]{ transition-delay:.08s } .rv[data-d="2"]{ transition-delay:.16s } .rv[data-d="3"]{ transition-delay:.24s } .rv[data-d="4"]{ transition-delay:.32s } /* ---------- Shared type ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:var(--bg-soft); max-width:100%; flex-wrap:wrap; overflow-wrap:anywhere; text-align:left; line-height:1.5; } .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2.6s infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 var(--accent-glow); } 70%{ box-shadow:0 0 0 9px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } /* Mask box is padded past the type box so ascenders/descenders are never shaved. Negative margins pull the layout back to the optical line. */ .line{ display:block; overflow:hidden; padding:.14em .06em .2em; margin:-.14em -.06em -.2em; } .line > span{ display:block; opacity:0; transform:translateY(135%) rotate(2deg); transition:transform 1.05s var(--ease), opacity 1.05s var(--ease); } .is-ready .line > span{ transform:none; opacity:1; } .is-ready .line:nth-child(2) > span{ transition-delay:.1s; } .is-ready .line:nth-child(3) > span{ transition-delay:.2s; } .grad{ background:var(--grad); background-size:220% 100%; /* background-clip:text paints only inside the background box, so round glyphs need slack on every side or their curves lose the fill. */ padding:.06em .04em .1em; margin:-.06em -.04em -.1em; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shift 9s ease-in-out infinite alternate, round 9s ease-in-out infinite alternate; } @keyframes shift{ to{ background-position:100% 0; } } @keyframes round{ from{ font-variation-settings:"ROND" 0; } to{ font-variation-settings:"ROND" 100; } } h2{ margin:0; font-size:clamp(30px,5.4vw,68px); line-height:1.02; letter-spacing:-.04em; font-weight:600; } .p{ font-weight:400; color:var(--ink-dim); line-height:1.65; letter-spacing:-.008em; } /* ---------- Footer ---------- */ .ftr{ border-top:1px solid var(--line-soft); padding-block:44px; } .ftr__in{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; } .ftr__links{ display:flex; gap:26px; } .ftr__links a{ font-size:13px; color:var(--ink-dim); transition:color .35s var(--ease); } .ftr__links a:hover{ color:var(--accent); } .ftr small{ font-size:12px; color:var(--ink-faint); font-weight:400; } /* ============================================================ index.html ============================================================ */ .hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(96px,12vh,124px); padding-bottom:clamp(32px,5vh,48px); } h1.display{ margin:26px 0 0; line-height:.98; letter-spacing:-.045em; font-weight:600; /* Flex column so the .line negative margins cannot collapse with each other. As adjacent blocks, -.20em and -.14em collapsed to a single -.20em, which left ~.14em of the mask padding in every gap and pushed the hero down. */ display:flex; flex-direction:column; align-items:flex-start; /* Scale to the shorter axis too, so the lede and CTA stay above the fold on a short laptop instead of only fitting on a tall display. */ font-size:clamp(44px, min(9.6vw, 13vh), 146px); } .hero__foot{ margin-top:clamp(26px,4.4vw,56px); display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; } .lede{ max-width:46ch; font-size:clamp(15px,1.55vw,18.5px); font-weight:400; color:var(--ink-dim); line-height:1.6; letter-spacing:-.008em; } .cta-row{ display:flex; gap:12px; flex-wrap:wrap; } .scroll-hint{ margin-top:clamp(26px,4vw,52px); display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); } .scroll-hint i{ display:block; width:56px; height:1px; background:var(--line); position:relative; overflow:hidden; } .scroll-hint i::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateX(-100%); animation:sweep 2.4s var(--ease-soft) infinite; } @keyframes sweep{ 50%{ transform:translateX(0); } 100%{ transform:translateX(100%); } } .marquee{ border-block:1px solid var(--line-soft); padding-block:clamp(22px,2.6vw,30px); overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee__track{ display:flex; width:max-content; will-change:transform; animation:slide 34s linear infinite; } .marquee__track.is-measured{ animation-duration:var(--dur); } .marquee:hover .marquee__track{ animation-play-state:paused; } .marquee__track span{ font-size:clamp(20px,3.4vw,40px); letter-spacing:-.035em; line-height:1.5; white-space:nowrap; flex:0 0 auto; color:var(--ink-faint); display:flex; align-items:center; transition:color .4s var(--ease); } /* The separator owns the whole gap, with equal margin either side, so the rhythm reads word / word / word. Previously an item's padding, the flex gap and a literal space in the markup all stacked up, which made the space before each word wider than the space after it. */ .marquee__track span::after{ content:"/"; color:var(--accent); margin-inline:.6em; font-weight:600; } .marquee__track span:hover{ color:var(--ink); } @keyframes slide{ to{ transform:translateX(-50%); } } .shead{ display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(38px,5vw,64px); } .shead__no{ font-size:11.5px; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; } .shead__t{ font-size:11.5px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase; } .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:20px; overflow:hidden; } @media (max-width:900px){ .cards{ grid-template-columns:1fr; } } .card{ position:relative; background:var(--bg); padding:clamp(28px,3.4vw,44px); min-height:min(300px,52vh); display:flex; flex-direction:column; /* flex-start, not space-between: space-between bottom-aligns the text, so a card with a shorter title opens a bigger gap under its icon and the 01/02/03 labels stop lining up across the row. */ justify-content:flex-start; gap:clamp(26px,3vw,34px); overflow:hidden; transition:background-color .6s var(--ease); } .card::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--accent-wash), transparent 60%); } .card:hover{ background:var(--bg-soft); } .card:hover::before{ opacity:1; } .card__n{ font-size:11.5px; letter-spacing:.16em; color:var(--ink-faint); } .card h3{ margin:0 0 12px; font-size:clamp(20px,2.1vw,26px); letter-spacing:-.03em; font-weight:600; } .card p{ margin:0; font-size:14.5px; } .card__ico{ width:34px; height:34px; color:var(--accent); } .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); } @media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } } .stat__v{ font-size:clamp(38px,5.6vw,74px); line-height:1.1; letter-spacing:-.05em; font-weight:600; } .stat__l{ margin-top:12px; font-size:12.5px; letter-spacing:.02em; color:var(--ink-faint); font-weight:400; } .work{ border-top:1px solid var(--line-soft); } .work__row{ position:relative; display:grid; grid-template-columns:64px 1fr auto; gap:clamp(16px,3vw,40px); align-items:center; padding-block:clamp(22px,2.8vw,34px); border-bottom:1px solid var(--line-soft); transition:padding-inline .6s var(--ease); } .work__row::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--ease); } .work__row:hover{ padding-inline:14px; } .work__row:hover::after{ transform:scaleX(1); } .work__no{ font-size:11.5px; letter-spacing:.14em; color:var(--ink-faint); } .work__name{ font-size:clamp(21px,3.2vw,40px); letter-spacing:-.035em; line-height:1.1; } .work__meta{ font-size:12.5px; color:var(--ink-faint); letter-spacing:.02em; font-weight:400; text-align:right; } @media (max-width:640px){ .work__row{ grid-template-columns:auto 1fr; } .work__meta{ grid-column:2; text-align:left; } } .cta{ text-align:center; } .cta h2{ font-size:clamp(36px,8.2vw,118px); letter-spacing:-.05em; line-height:1.04; } .mailto{ display:inline-block; position:relative; background:linear-gradient(var(--accent),var(--accent)) 0 100%/0% 1px no-repeat; transition:background-size .6s var(--ease), color .4s var(--ease); } .mailto:hover{ background-size:100% 1px; color:var(--accent); } /* ============================================================ 404.html ============================================================ */ .err{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(130px,18vh,170px); padding-bottom:clamp(70px,10vh,100px); text-align:center; align-items:center; } .err__code{ display:flex; justify-content:center; align-items:baseline; gap:.02em; font-size:clamp(88px,26vw,340px); line-height:1; letter-spacing:-.055em; font-weight:600; margin:8px 0 0; max-width:100%; padding-inline:.08em; /* room for the hover rotate */ } .err__code b{ display:inline-block; font-weight:600; line-height:1.12; /* background-clip:text paints the gradient only inside this element's background box. The round 0 overshoots both cap-height and the baseline, so without this padding its top and bottom never get filled -- it reads as a clipped glyph rather than a layout overflow. */ padding:.1em .05em .14em; background:var(--grad); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shift 9s ease-in-out infinite alternate; transition:font-variation-settings .5s var(--ease), transform .5s var(--ease); cursor:default; } .err__code b:hover{ font-variation-settings:"ROND" 100; transform:translateY(-8px) rotate(-3deg); } .err__code b:nth-child(2){ animation-delay:-3s; } .err__code b:nth-child(3){ animation-delay:-6s; } .err h1{ margin:clamp(14px,2vw,24px) 0 0; font-size:clamp(27px,5vw,60px); line-height:1.12; letter-spacing:-.04em; font-weight:600; max-width:18ch; } .err__p{ max-width:44ch; margin:24px auto 0; font-size:clamp(15px,1.5vw,17.5px); } .err .cta-row{ justify-content:center; margin-top:clamp(30px,4vw,44px); } .err__links{ margin-top:clamp(56px,8vw,96px); width:100%; max-width:720px; border-top:1px solid var(--line-soft); } .err__link{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:18px; border-bottom:1px solid var(--line-soft); text-align:left; position:relative; transition:padding-inline .5s var(--ease); } .err__link::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease); } .err__link:hover{ padding-inline:12px; } .err__link:hover::after{ transform:scaleX(1); } .err__link span{ font-size:clamp(15px,2vw,19px); letter-spacing:-.025em; } .err__link em{ font-style:normal; font-size:12px; font-weight:400; color:var(--ink-faint); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .line > span{ transform:none; opacity:1; } .rv{ opacity:1; transform:none; } }