:root{ /* image placement/sizing */ --hero-left: clamp(12px, 6vw, 15px); --hero-maxw: min(42vw, 640px); --hero-maxh: 80svh; --hero-top: 62%; /* brand/footer offsets */ --brand-left: var(--hero-left); --brand-top: clamp(12px, 4vh, 84px); --brand-shift: 150px; --footer-shift: 150px; /* corner placement */ --corner-right: clamp(12px, 6vw, 32px); --corner-top: clamp(12px, 6vh, 72px); --corner-bottom: clamp(12px, 6vh, 64px); --corner-maxw: min(36vw, 520px); --corner-maxh: 70svh; /* animations (normal) */ --fadeDur: 3200ms; /* image + theme cross-fade */ --cornerOutDur: 600ms; --fx-zoom: 1.03; /* headline */ --headline-w: min(68ch, 80vw); --headline-size: clamp(24px, 6vw, 56px); --slideTransDur: 900ms; } /* FAST MODE: applied to after headline finishes */ body.fast{ --fadeDur: 1600ms; /* quicker cross-fades */ --cornerOutDur: 360ms; /* snappier corner exit */ --fx-zoom: 1.12; /* a touch punchier */ } /* background “skin” shared by body + overlay */ .skin{ background-color:var(--base); background-image: radial-gradient(120% 120% at 22% 24%, var(--hi) 0%, rgba(255,255,255,0) 55%), radial-gradient(120% 130% at 82% 78%, var(--shadow) 0%, rgba(0,0,0,0) 60%), linear-gradient(145deg, var(--sheen) 0%, rgba(255,255,255,0) 45%), repeating-linear-gradient(0deg, var(--grain1) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, var(--grain2) 0 1px, transparent 1px 3px); background-repeat:no-repeat, no-repeat, no-repeat, repeat, repeat; background-size:cover, cover, cover, 4px 4px, 4px 4px; background-blend-mode:normal, normal, overlay, soft-light, soft-light; } /* page sizing */ html,body{height:100%} body{ margin:0; min-height:100dvh; height:100svh; overflow:hidden; } /* themes */ body.theme-graphite, .theme-fade.theme-graphite{ --base:#0b0b0c; --hi:rgba(255,255,255,.10); --shadow:rgba(0,0,0,.50); --sheen:rgba(255,255,255,.04); --grain1:rgba(255,255,255,.018); --grain2:rgba(0,0,0,.030); } body.theme-linkedin, .theme-fade.theme-linkedin{ --base:#0A66C2; --hi:rgba(255,255,255,.16); --shadow:rgba(0,0,0,.30); --sheen:rgba(255,255,255,.06); --grain1:rgba(255,255,255,.022); --grain2:rgba(0,0,0,.035); } body.theme-red, .theme-fade.theme-red{ --base:#c52823; --hi:rgba(255,255,255,.16); --shadow:rgba(0,0,0,.30); --sheen:rgba(255,255,255,.06); --grain1:rgba(255,255,255,.025); --grain2:rgba(0,0,0,.025); } body.theme-magenta, .theme-fade.theme-magenta{ --base:#b40e4a; --hi:rgba(255,255,255,.14); --shadow:rgba(0,0,0,.28); --sheen:rgba(255,255,255,.05); --grain1:rgba(255,255,255,.02); --grain2:rgba(0,0,0,.03); } body.theme-teal, .theme-fade.theme-teal{ --base:#0f6b6b; --hi:rgba(255,255,255,.18); --shadow:rgba(0,0,0,.34); --sheen:rgba(255,255,255,.06); --grain1:rgba(255,255,255,.022); --grain2:rgba(0,0,0,.035); } body.theme-pinterest, .theme-fade.theme-pinterest{ --base:#e6d5b8; --hi:rgba(255,255,255,.22); --shadow:rgba(0,0,0,.18); --sheen:rgba(255,255,255,.08); --grain1:rgba(255,255,255,.03); --grain2:rgba(0,0,0,.03); } body.theme-facebook, .theme-fade.theme-facebook{ --base:#0e2b36; --hi:rgba(255,255,255,.14); --shadow:rgba(0,0,0,.40); --sheen:rgba(255,255,255,.05); --grain1:rgba(255,255,255,.022); --grain2:rgba(0,0,0,.035); } /* X theme (light UI) */ body.theme-x, .theme-fade.theme-x{ --base:#eeeeef; --hi:rgba(255,255,255,.22); --shadow:rgba(0,0,0,.18); --sheen:rgba(255,255,255,.08); --grain1:rgba(255,255,255,.03); --grain2:rgba(0,0,0,.03); } /* theme overlay */ .theme-fade{ position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:0; transition: opacity var(--fadeDur) ease-in-out; } /* helpers */ .blend-screen{ mix-blend-mode: screen; filter: saturate(1.12) contrast(1.06) drop-shadow(0 8px 26px rgba(0,0,0,.35)); } .bg img.ghost{ opacity:0 !important; visibility:hidden; } /* Brand + footer color transition */ .site-brand, .site-footer{ transition: color var(--fadeDur) ease, text-shadow var(--fadeDur) ease, -webkit-text-stroke var(--fadeDur) ease; } /* Brand (bold, no shadow or stroke) */ .site-brand{ position: fixed; left: calc(var(--brand-left) + var(--brand-shift)); top: var(--brand-top); z-index: 10; color: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight: 700; /* BOLD */ font-size: clamp(14px, 2.2vw, 30px); letter-spacing: 0.2px; line-height: 1; -webkit-text-stroke: 0; /* NO STROKE */ text-shadow: none; /* NO SHADOW */ user-select: none; } /* Light-ui surfaces (Pinterest/X) — keep dark text, but no shadow/stroke */ body.ui-light .site-brand, body.ui-light .site-footer{ color:#0b0b0c; -webkit-text-stroke:0; text-shadow: none; /* NO SHADOW */ } /* primary images */ .bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; } .bg img{ position:absolute; left: var(--hero-left); top: var(--hero-top); transform: translateY(-45%); width:auto; height:auto; max-width: var(--hero-maxw); max-height: var(--hero-maxh); opacity:0; transition: opacity var(--fadeDur) ease-in-out; image-rendering:-webkit-optimize-contrast; } .bg img.active{ opacity:1 } .bg img.center-v{ top:50%; transform: translateY(-50%); } /* corner images */ .corner{ position:fixed; inset:0; z-index:-1; pointer-events:none; } .corner img{ position:absolute; right: var(--corner-right); top: var(--corner-top); width:auto; height:auto; max-width: var(--corner-maxw); max-height: var(--corner-maxh); opacity:0; transform: scale(var(--fx-zoom)); transition: opacity var(--fadeDur) ease-in-out, transform var(--fadeDur) ease-in-out; will-change: opacity, transform; } .corner img.active{ opacity:0; transform: scale(var(--fx-zoom)); } .corner img.center-y{ top:50%; transform: translateY(-50%) scale(var(--fx-zoom)); } .phase-2 .corner img.center-y.active{ transform: translateY(-50%) scale(1); } /* bottom-right utility (Facebook) */ .corner img.br{ top:auto; bottom: var(--corner-bottom); right: var(--corner-right); transform: scale(var(--fx-zoom)); } /* bottom-left utility (X second corner) */ .corner img.bl{ top:auto; bottom: var(--corner-bottom); left: var(--corner-right); right:auto; transform: scale(var(--fx-zoom)); } /* phase-2: primary out + corner in */ .phase-2 .bg img.active{ opacity:0; } .phase-2 .corner img.active{ opacity:1; transform: scale(1); } /* quick corner exit */ .corner img.leaving{ opacity:0; transform: scale(1.02); transition: opacity var(--cornerOutDur) cubic-bezier(.4,0,.6,1), transform var(--cornerOutDur) cubic-bezier(.4,0,.6,1); } /* Preserve vertical centering for center-y corners when leaving */ .corner img.center-y.leaving{ transform: translateY(-50%) scale(1.02); } @media (prefers-reduced-motion: reduce){ .bg img, .corner img, .theme-fade{ transition:none } } /* footer (no shadow or stroke) */ .site-footer{ position: fixed; left: calc(var(--hero-left) + var(--footer-shift)); bottom: clamp(10px, 2vh, 22px); z-index:10; color:#fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight:400; font-size:13px; letter-spacing:.2px; line-height:1.2; -webkit-text-stroke: 0; /* NO STROKE */ text-shadow: none; /* NO SHADOW */ } @media (max-width:480px){ :root{ --footer-shift: 40px; } .site-footer{ font-size:12px; -webkit-text-stroke:0; } } /* headline */ .hero-text{ position: fixed; top:50%; left:50%; transform: translate(-50%,-50%); width: var(--headline-w); text-align:center; pointer-events:none; z-index:5; } .headline{ margin:0; display:inline-block; font: 400 var(--headline-size)/1.08 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:-0.01em; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); transition: color var(--fadeDur) ease, text-shadow var(--fadeDur) ease; } .caret{ display:inline-block; width:.5ch; border-right:2px solid #62f0d9; transform: translateY(.1em); animation: caretBlink 1s steps(1,end) infinite; transition: border-right-color var(--fadeDur) ease; } @keyframes caretBlink{ 50%{ border-color: transparent } } .word, .slide{ display:inline-block; opacity:0; transform: translateY(10px); transition: opacity var(--slideTransDur) ease, transform var(--slideTransDur) ease; } .word.on, .slide.on{ opacity:1; transform: translateY(0); } body.fx-words .caret, body.fx-slide .caret, body.fx-scramble .caret{ visibility:hidden; } /* Headline light-UI treatment (Pinterest/X) */ body.ui-light .headline{ color:#0b0b0c; text-shadow: 0 1px 0 rgba(255,255,255,.22); } body.ui-light .caret{ border-right-color:#0b0b0c; }