/* ============================================================ STONIE STUDIO — styles.css Theme: black / grey / white + lime green pops ============================================================ */ /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: auto; /* Lenis handles smooth scroll */ -webkit-text-size-adjust: 100%; /* NOTE: do NOT set overflow-x here — any clip/hidden on turns it into a scroll container and breaks position:sticky + ScrollTrigger (hero pin, circle reveal). Horizontal overflow is contained on instead. */ } body { font-family: var(--font-body); background-color: var(--bg); color: var(--fg); line-height: 1.6; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } /* Font system: --font-display : bold expressive headings (Bricolage Grotesque) --font-body : clean readable body (Instrument Sans) --font-mono : technical grey labels (Space Mono) */ :root { --font-display: 'Anton', sans-serif; /* headings */ --font-body: 'Inter', sans-serif; /* body */ --font-mono: 'Space Mono', monospace; /* technical labels */ --font-brand: 'Bricolage Grotesque', sans-serif; /* the StonieStudio wordmark only */ } /* Only hide the native cursor once the custom cursor is actually running. If main.js fails to load, the normal pointer stays visible. */ body.cursor-ready, body.cursor-ready * { cursor: none; } /* The custom cursor element is hidden until JS shows it */ .cursor { opacity: 0; transition: opacity 0.2s ease; } body.cursor-ready .cursor { opacity: 1; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { background: none; border: none; font: inherit; } ul { list-style: none; } /* Lime selection highlight (Dulcedo-style) */ ::selection { background: var(--accent); color: var(--accent-ink); } ::-moz-selection { background: var(--accent); color: var(--accent-ink); } /* ===== THEME TOKENS ===== */ :root { /* Dark (default) — black / grey / white + lime pop */ --bg: #0A0A0A; --bg-2: #141414; --bg-3: #1F1F1F; --fg: #F4F4F2; --fg-2: #9A9A98; --fg-3: #565654; --accent: #C6F135; /* lime green */ --rfeather: #FFFFFF; /* rooster feathers (white on the lime body) */ --accent-2: #B2DE22; --accent-ink:#0A0A0A; /* text on lime */ --border: rgba(244,244,242,0.10); --invert-bg: #F4F4F2; --invert-fg: #0A0A0A; --invert-fg2:#454545; --shadow: 0 10px 50px rgba(0,0,0,0.6); --code-dot: 198,241,53; /* particle-logo resting colour (lime on black) */ } /* Light — "Sunbaked": warm bone/sand paper, warm ink, a blood-orange pop. (Dark mode stays black / grey / lime.) */ [data-theme="light"] { --bg: #ECE5D6; /* warm sand paper */ --bg-2: #E3DBC9; --bg-3: #D7CDB7; --fg: #1B1813; /* warm near-black ink */ --fg-2: #6A6353; --fg-3: #A89E8A; --accent: #E8430F; /* blood orange */ --rfeather: #FBF1DC; /* rooster feathers (light cream on the orange body) */ --accent-2: #C9370B; --accent-ink:#FBF3E7; /* cream text on the orange */ --border: rgba(27,24,19,0.14); --invert-bg: #211B14; /* dark warm panel (Studio reveal) */ --invert-fg: #F2EAD9; --invert-fg2:#A89E8A; --shadow: 0 12px 50px rgba(40,28,8,0.20); --code-dot: 232,67,15; /* particle-logo resting colour (vibrant orange) */ } /* ===== TYPOGRAPHY HELPERS ===== */ .font-syne { font-family: var(--font-display); } .font-mono { font-family: var(--font-mono); } /* The "Stonie Studio" wordmark keeps its Bricolage Grotesque italic in both the hero and the footer (see .hero__name / .footer__name span, which use var(--font-brand)); everything else uses the global Anton / Inter. */ /* ===== LOADER (green outline → green fill → implode) ===== */ .loader { position: fixed; inset: 0; z-index: 1000; background: var(--bg); /* follows the active theme (set pre-paint) */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; pointer-events: none; transition: opacity 0.5s ease, visibility 0.5s ease; } .loader.is-done { opacity: 0; visibility: hidden; } .loader__logo { width: clamp(180px, 28vw, 300px); height: clamp(180px, 28vw, 300px); overflow: visible; transform-origin: center; /* The implode: scale up a touch, then snap inward to nothing */ transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; } /* Drawn outline in lime; JS animates stroke-dashoffset */ .loader__path { fill: var(--accent); fill-opacity: 0; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; transition: fill-opacity 0.5s ease; } /* Fill the lime in once drawn */ .loader.is-filled .loader__path { fill-opacity: 1; } /* Brief swell before the implode */ .loader.is-swell .loader__logo { transform: scale(1.12); } /* Implode inward fast — like a black hole */ .loader.is-implode .loader__logo { transform: scale(0.001); opacity: 0; transition: transform 0.45s cubic-bezier(0.7,0,0.84,0), opacity 0.45s ease 0.15s; } .loader__count { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.3em; color: var(--accent); transition: opacity 0.3s ease; } .loader.is-swell .loader__count, .loader.is-implode .loader__count { opacity: 0; } /* ===== GRAIN ===== */ .grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 999; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 200px 200px; animation: grainShift 0.4s steps(1) infinite; } @keyframes grainShift { 0% { transform: translate(0,0); } 10% { transform: translate(-2%,-3%); } 20% { transform: translate(3%,1%); } 30% { transform: translate(-1%,4%); } 40% { transform: translate(4%,-2%); } 50% { transform: translate(-3%,2%); } 60% { transform: translate(2%,-4%); } 70% { transform: translate(-4%,1%); } 80% { transform: translate(1%,3%); } 90% { transform: translate(3%,-1%); } 100% { transform: translate(-2%,4%); } } /* ===== SCROLL PROGRESS ===== */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 900; background: transparent; } .scroll-progress span { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 0.1s linear; } /* ===== HEADER ===== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 800; display: grid; /* 3 cols → nav sits dead-centre */ grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 0 2rem; height: 72px; background: transparent; transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; } .header.is-scrolled { background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--border); } [data-theme="light"] .header.is-scrolled { background: rgba(237, 237, 235, 0.88); } .header__brand { display: flex; align-items: center; justify-self: start; } /* Green Stonie icon mark — explicit size (square viewBox) */ .brand-icon { height: 40px; width: 40px; fill: var(--accent); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease; } .header__brand:hover .brand-icon { transform: rotate(160deg); opacity: 0.9; } .header__nav { display: flex; gap: 0.25rem; justify-self: center; } .navlink { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); padding: 0.5rem 0.75rem; border-radius: 4px; transition: color 0.2s ease, background 0.2s ease; position: relative; overflow: hidden; } .navlink span { display: inline-block; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); } .navlink:hover { color: var(--fg); } .navlink:hover span { transform: translateY(-2px); } .header__right { display: flex; align-items: center; gap: 1.25rem; justify-self: end; } .header__id { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--fg-3); white-space: nowrap; } /* Theme picker */ .theme-pick { display: flex; gap: 0.5rem; align-items: center; } .theme-pick__dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border); transition: border-color 0.2s ease, transform 0.2s ease; position: relative; } .theme-pick__dot[data-set-theme="light"] { background: #F4F4F2; border-color: rgba(244,244,242,0.3); } .theme-pick__dot[data-set-theme="dark"] { background: #141414; border-color: rgba(244,244,242,0.2); } .theme-pick__dot[aria-pressed="true"] { border-color: var(--accent); transform: scale(1.2); } .theme-pick__dot:hover { transform: scale(1.15); } /* Burger */ .burger { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px 0; } .burger span { display: block; height: 1.5px; background: var(--fg); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, width 0.3s ease; transform-origin: left center; } .burger[aria-expanded="true"] span:first-child { transform: rotate(40deg) translateY(-1px); } .burger[aria-expanded="true"] span:last-child { transform: rotate(-40deg) translateY(1px); } /* ===== MOBILE MENU ===== */ .menu { position: fixed; inset: 0; z-index: 700; background: var(--bg-2); display: flex; flex-direction: column; justify-content: center; padding: 6rem 2rem 3rem; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); visibility: hidden; } .menu.is-open { transform: translateX(0); visibility: visible; } .menu__nav { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; justify-content: center; } .menu__link { display: flex; align-items: baseline; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); overflow: hidden; } .menu__idx { font-family: var(--font-mono); font-size: 0.65rem; color: var(--fg-3); letter-spacing: 0.1em; } .menu__txt { font-family: var(--font-display); font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 700; line-height: 1.06; transition: color 0.2s ease; } .menu__link:hover .menu__txt { color: var(--accent); } .menu__foot { display: flex; gap: 2rem; flex-wrap: wrap; } .menu__foot a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--fg-2); transition: color 0.2s ease; } .menu__foot a:hover { color: var(--fg); } /* ===== TAGS ===== */ .tag { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 2px; white-space: nowrap; } .tag--muted { color: var(--fg-3); } .tag--dot { color: var(--fg); } .tag--dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } /* ===== SECTION HEADS ===== */ .section-head { margin-bottom: 3rem; } .section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } /* Index number — no box, bigger, sits just above the heading. (Overrides the .tag border/padding it also carries in the markup.) */ .section-head__idx { display: block; border: 0; padding: 0; background: none; margin-bottom: 0.4rem; font-family: var(--font-mono); font-size: clamp(0.9rem, 1.4vw, 1.15rem); letter-spacing: 0.12em; color: var(--accent); } .section-head__title { font-family: var(--font-display); font-size: clamp(2.6rem, 8vw, 8rem); /* matches the Studio Ethos heading */ font-weight: 800; line-height: 0.95; letter-spacing: normal; text-transform: uppercase; color: var(--fg); margin-bottom: 0.75rem; } .section-head__title--sm { font-size: clamp(2.6rem, 8vw, 8rem); /* same size as the rest now */ margin-bottom: 0; } .section-head__note { font-size: 0.9rem; color: var(--fg-2); max-width: 46ch; line-height: 1.6; } /* Centred section heading variant */ .section-head--center { text-align: center; display: flex; flex-direction: column; align-items: center; } .section-head--center .section-head__idx { display: inline-flex; } .section-head--center .section-head__note { max-width: 46ch; } /* ===== HERO (split-wordmark scroll reveal) ===== */ .hero { position: relative; height: 250vh; /* scroll distance for the split reveal */ background: var(--bg); } .hero__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Big Stonie logo "in code" — a cursor-reactive particle canvas behind the wordmark. Uses the shared .code-logo base (absolute, inset:0, z-index:0, pointer-events:none); the logo is scaled (data-scale) to overflow the pin internally so it crops top + bottom, the way the old glitch mark did. */ .code-logo--hero { z-index: 0; } /* Centred wordmark + tagline */ .hero__brand { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 0 1.5rem; } .hero__name { font-size: 0; /* kill inline-block whitespace between halves */ line-height: 0; white-space: nowrap; } /* The wordmark is the StonieStudio logo (CSS masks, tinted var(--fg) so it flips with the theme). Two halves — "Stonie" + "Studio" — sit together and slide apart as --hp rises, revealing the image growing from the seam. */ .hero__name-l, .hero__name-r { display: inline-block; vertical-align: bottom; height: clamp(2.7rem, 12.5vw, 9rem); background: var(--fg); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; will-change: transform; } .hero__name-l { aspect-ratio: 429.7 / 126.01; -webkit-mask-image: url(../images/stonie-word.svg); mask-image: url(../images/stonie-word.svg); transform: translateX(calc(var(--hp, 0) * -52vw)); } .hero__name-r { aspect-ratio: 433.1 / 126.01; -webkit-mask-image: url(../images/studio-word.svg); mask-image: url(../images/studio-word.svg); transform: translateX(calc(var(--hp, 0) * 52vw)); } .hero__tagline { margin-top: 0.4rem; font-family: var(--font-mono); font-size: clamp(0.72rem, 1.2vw, 0.98rem); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); /* fades out as the split begins */ opacity: calc(1 - var(--hp, 0) * 2.5); } /* Image grows from the centre seam to full-bleed, sitting ABOVE the outline logo (z1) but BELOW the wordmark (z2). Reaches full opacity early (×3) so it solidly hides the logo behind it while the type splits over the top. */ .hero__reveal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(8vw + var(--hp, 0) * 120vw); height: calc(10vh + var(--hp, 0) * 130vh); max-width: 100vw; overflow: hidden; border-radius: calc(8px * (1 - var(--hp, 0))); /* dead-zone at the very start so a tiny initial --hp (e.g. mobile address-bar resize on load) can't flash the image faintly — stays fully hidden till scroll */ opacity: clamp(0, calc(var(--hp, 0) * 5 - 0.18), 1); z-index: 1; will-change: width, height, opacity; } .hero__reveal img, .hero__reveal video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Kill WebKit/Safari's built-in video chrome — the big central "start playback" button it shows when it blocks autoplay, plus any media controls. Unscoped (Safari is unreliable about these pseudo-elements behind a descendant combinator, and the hero video is the only