/* ===================================================================== SerensWeb - prototype stylesheet, copied verbatim from the design handoff (docs/handoff/prototype/styles.css). Design tokens live in tokens.css. Do not translate these into block styles; the patterns output markup that these class hooks find. The container query context (container-name: site) sits on below. ===================================================================== */ /* ---- 2. RESET ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--color-dark); color: var(--color-text-dark); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Drives the container queries below. In WordPress this can sit on the site wrapper instead; the layout is container-query driven, not media. */ container-type: inline-size; container-name: site; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } /* ---- 3. LAYOUT PRIMITIVES ---- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); position: relative; } .section--dark { background: var(--color-dark); color: var(--color-text-light); } .section--dark2 { background: var(--color-dark-2); color: var(--color-text-light); } .section--light { background: var(--color-smoke); color: var(--color-text-dark); } .section-head { max-width: 640px; margin-bottom: clamp(36px, 5cqi, 64px); } .section-head p { margin-top: 18px; } .h2 { font-size: clamp(1.9rem, 4.6cqi, 3.2rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; } .lede { font-size: clamp(1rem, 1.5cqi, 1.18rem); line-height: 1.6; color: var(--color-text-dark-2); } .section--dark .lede, .section--dark2 .lede { color: var(--color-text-muted); } /* ---- 4. BUTTONS ---- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: var(--r-pill); font-size: 0.94rem; font-weight: 500; letter-spacing: -0.01em; transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s; white-space: nowrap; } .btn svg { width: 16px; height: 16px; } .btn--primary { background: var(--color-primary); color: #1a1206; box-shadow: 0 8px 24px -10px var(--color-primary); } .btn--primary:hover { background: var(--color-primary-strong); transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--color-primary); } .btn--primary .arr { transition: transform 0.25s var(--ease); } .btn--primary:hover .arr { transform: translateX(3px); } .btn--ghost { border: 1px solid var(--hairline-dark); color: var(--color-text-light); } .btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); } .section--light .btn--ghost { border-color: var(--hairline-light); color: var(--color-text-dark); } .section--light .btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary-strong); } /* =================================================================== HEADER =================================================================== */ .header { position: sticky; top: 0; z-index: 60; background: color-mix(in oklab, var(--color-dark) 78%, transparent); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s, padding 0.3s; } .header.is-scrolled { border-bottom-color: var(--hairline-dark); background: color-mix(in oklab, var(--color-dark) 90%, transparent); } .header__bar { display: flex; align-items: center; justify-content: space-between; height: 72px; transition: height 0.3s var(--ease); } .header.is-scrolled .header__bar { height: 64px; } /* Wordmark */ .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--color-text-light); } .brand__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--color-primary); display: grid; place-items: center; color: #1a1206; font-family: var(--font-mono); font-weight: 700; font-size: 15px; box-shadow: 0 6px 16px -6px var(--color-primary); } .brand__name { font-weight: 600; font-size: 1.18rem; letter-spacing: -0.02em; } .brand__name b { color: var(--color-primary); font-weight: 600; } .nav { display: none; align-items: center; gap: 4px; } .nav a { padding: 9px 14px; border-radius: var(--r-pill); font-size: 0.92rem; color: var(--color-text-muted); transition: color 0.2s, background 0.2s; } .nav a:hover { color: var(--color-text-light); background: var(--hairline-dark); } .header__cta { display: none; } .burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 11px; border-radius: 10px; border: 1px solid var(--hairline-dark); } .burger span { width: 20px; height: 2px; background: var(--color-text-light); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; } body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .burger span:nth-child(2) { opacity: 0; } body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 55; background: color-mix(in oklab, var(--color-dark) 96%, transparent); backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0.3s; } body.menu-open .drawer { opacity: 1; visibility: visible; transform: none; } .drawer a { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-light); padding: 12px 0; border-bottom: 1px solid var(--hairline-dark); } .drawer .btn { margin-top: 28px; justify-content: center; font-size: 1.05rem; padding: 16px; } /* =================================================================== HERO =================================================================== */ .hero { position: relative; overflow: hidden; padding-block: clamp(72px, 12cqi, 150px); } .hero__mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero__mesh::before, .hero__mesh::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; } .hero__mesh::before { width: 60cqi; height: 60cqi; top: -22cqi; right: -10cqi; background: radial-gradient(circle, var(--color-primary), transparent 68%); } .hero__mesh::after { width: 44cqi; height: 44cqi; bottom: -20cqi; left: -8cqi; background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 60%, #ff4d6d), transparent 70%); opacity: 0.28; } .hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--hairline-dark) 1px, transparent 1px), linear-gradient(90deg, var(--hairline-dark) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 70% at 30% 30%, #000 30%, transparent 78%); opacity: 0.6; } .hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(44px, 7cqi, 72px); } .hero__copy { max-width: 660px; } .hero h1 { font-size: clamp(2.6rem, 8.4cqi, 5.4rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 600; color: var(--color-text-light); margin-top: 22px; } .hero h1 em { font-style: normal; color: var(--color-primary); } .hero__sub { margin-top: 26px; font-size: clamp(1.05rem, 1.7cqi, 1.3rem); line-height: 1.55; color: var(--color-text-muted); max-width: 50ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .hero__stats { display: flex; gap: clamp(24px, 5cqi, 52px); margin-top: 52px; flex-wrap: wrap; } .hero__stat .n { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-light); } .hero__stat .n em { color: var(--color-primary); font-style: normal; } .hero__stat .l { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 6px; } /* Code/browser motif */ .codecard { background: var(--color-dark-3); border: 1px solid var(--hairline-dark); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; max-width: 520px; justify-self: start; } .codecard__bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--hairline-dark); background: rgba(255,255,255,0.02); } .codecard__dots { display: flex; gap: 6px; } .codecard__dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3a; } .codecard__dots i:first-child { background: var(--color-primary); } .codecard__url { margin-left: 8px; flex: 1; font-family: var(--font-mono); font-size: 11.5px; color: var(--color-text-muted); background: rgba(255,255,255,0.04); padding: 5px 12px; border-radius: var(--r-pill); } .codecard__body { padding: 20px 22px; font-family: var(--font-mono); font-size: 13px; line-height: 2; } .codecard__body .ln { display: block; white-space: pre; color: var(--color-text-muted); } .codecard__body .tag { color: var(--color-primary); } .codecard__body .key { color: #6ea8fe; } .codecard__body .str { color: #79c08f; } .codecard__body .dim { color: #5a5a58; } .codecard__caret { display: inline-block; width: 8px; height: 16px; background: var(--color-primary); vertical-align: -3px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* =================================================================== ABOUT =================================================================== */ .about__grid { display: grid; gap: clamp(36px, 6cqi, 64px); align-items: start; } .about__statement { font-size: clamp(1.5rem, 3.4cqi, 2.45rem); line-height: 1.28; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; } .about__statement em { font-style: normal; color: var(--color-primary-strong); } .about__side p { color: var(--color-text-dark-2); line-height: 1.65; } .about__stack-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text-dark); margin-top: 30px; } .stack { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; } .stack li { font-family: var(--font-mono); font-size: 12.5px; padding: 8px 13px; border-radius: var(--r-pill); background: var(--color-white); border: 1px solid var(--color-smoke-2); color: var(--color-text-dark); transition: transform 0.2s var(--ease), border-color 0.2s, color 0.2s; } .stack li:hover { transform: translateY(-2px); border-color: var(--color-primary); color: var(--color-primary-strong); } /* =================================================================== STRENGTHS =================================================================== */ .cards { display: grid; gap: 18px; grid-template-columns: 1fr; } .fcard { background: var(--color-dark-3); border: 1px solid var(--hairline-dark); border-radius: var(--r-md); padding: 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s; } .fcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 100% 0%, var(--color-primary-faint), transparent 55%); opacity: 0; transition: opacity 0.35s; } .fcard:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--color-primary) 45%, transparent); } .fcard:hover::after { opacity: 1; } .fcard__ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 22px; background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent); } .fcard__ico svg { width: 24px; height: 24px; } .fcard h3 { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-light); margin-bottom: 10px; } .fcard p { font-size: 0.96rem; line-height: 1.6; color: var(--color-text-muted); } /* Each skill resolves to its own subdomain, surfaced as a live link affordance */ .fcard__url { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 20px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.01em; color: var(--color-text-muted); transition: color 0.25s var(--ease); } .fcard__url .fcard__sub { color: var(--color-primary); font-weight: 500; } .fcard__url .arr { width: 14px; height: 14px; margin-left: auto; opacity: 0.65; transition: transform 0.25s var(--ease), opacity 0.25s; } .fcard:hover .fcard__url { color: var(--color-text-light); } .fcard:hover .fcard__url .arr { transform: translate(3px, -3px); opacity: 1; } /* =================================================================== SELECTED WORK =================================================================== */ .work__grid { display: grid; gap: 22px; grid-template-columns: 1fr; } .proj { text-align: left; width: 100%; background: var(--color-white); border: 1px solid var(--color-smoke-2); border-radius: var(--r-md); overflow: hidden; transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), border-color 0.32s; display: flex; flex-direction: column; } .proj:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--color-smoke-2); } .proj__viz { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--color-dark); } .proj__viz::before { content: ""; position: absolute; inset: 0; transition: transform 0.5s var(--ease); } .proj:hover .proj__viz::before { transform: scale(1.06); } /* abstract gradient blocks per project, vivid, fills the frame */ .viz-a::before { background: radial-gradient(130% 115% at 22% 12%, var(--color-primary), #c2410c 48%, #5e1f08 80%, #1a1410); } .viz-b::before { background: radial-gradient(130% 115% at 80% 14%, #7c92ff, #3a40b8 48%, #1d2160 82%, #12131f); } .viz-c::before { background: radial-gradient(130% 115% at 20% 86%, #3ee0a5, #129b6b 46%, #0c5039 82%, #0d1714); } .viz-d::before { background: radial-gradient(130% 115% at 82% 82%, #c79bff, #8b46d8 46%, #4a2585 82%, #17101f); } .proj__viz .ovl { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.5; } .proj__viz .chip { position: absolute; left: 16px; bottom: 16px; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(10,10,10,0.55); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.16); } .proj__viz .view { position: absolute; right: 16px; top: 16px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,10,10,0.5); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18); opacity: 0; transform: scale(0.8) translateY(-4px); transition: opacity 0.3s, transform 0.3s var(--ease); } .proj:hover .view { opacity: 1; transform: none; } .proj__body { padding: 22px 24px 26px; } .proj__body .cat { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary-strong); } .proj__body h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; margin: 9px 0 9px; } .proj__body p { font-size: 0.95rem; line-height: 1.55; color: var(--color-text-dark-2); } /* =================================================================== PROCESS =================================================================== */ .steps { display: grid; gap: 18px; grid-template-columns: 1fr; } .step { position: relative; padding-top: 26px; border-top: 1px solid var(--hairline-dark); } .step h3 { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-light); margin: 16px 0 10px; } .step p { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-muted); } .step__dot { position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); } /* =================================================================== CONTACT =================================================================== */ .contact__grid { display: grid; gap: clamp(40px, 6cqi, 72px); align-items: start; } .contact__lead h2 { font-size: clamp(2rem, 5.5cqi, 3.6rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; margin-top: 18px; } .contact__lead h2 em { font-style: normal; color: var(--color-primary); } .contact__meta { margin-top: 30px; display: grid; gap: 16px; } .contact__meta a, .contact__meta div { display: flex; align-items: center; gap: 13px; color: var(--color-text-muted); font-size: 0.98rem; } .contact__meta svg { width: 18px; height: 18px; color: var(--color-primary); flex: none; } .contact__meta a:hover { color: var(--color-text-light); } .form { display: grid; gap: 16px; } .field { display: grid; gap: 8px; position: relative; } .field label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .field input, .field textarea { font: inherit; font-size: 0.98rem; color: var(--color-text-light); background: rgba(255,255,255,0.03); border: 1px solid var(--hairline-dark); border-radius: var(--r-sm); padding: 13px 15px; width: 100%; transition: border-color 0.2s, background 0.2s; } .field textarea { resize: vertical; min-height: 130px; } .field input::placeholder, .field textarea::placeholder { color: #6a6a68; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); background: rgba(255,255,255,0.05); } .field.invalid input, .field.invalid textarea { border-color: #ff5b5b; } .field__err { font-size: 12.5px; color: #ff7a7a; min-height: 0; opacity: 0; transform: translateY(-3px); transition: opacity 0.2s, transform 0.2s; } .field.invalid .field__err { opacity: 1; transform: none; } .form .btn { margin-top: 6px; justify-content: center; padding: 15px; } .form__success { display: none; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px; border-radius: var(--r-md); background: var(--color-primary-soft); border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent); } .form__success.show { display: flex; animation: rise 0.5s var(--ease); } .form__success .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: #1a1206; } .form__success h3 { font-size: 1.3rem; font-weight: 600; color: var(--color-text-light); } .form__success p { color: var(--color-text-muted); line-height: 1.55; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } } /* =================================================================== FOOTER =================================================================== */ .footer { background: var(--color-dark); color: var(--color-text-light); padding-block: clamp(56px, 7cqi, 88px) 36px; border-top: 1px solid var(--hairline-dark); } .footer__top { display: grid; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--hairline-dark); } .footer__brandblock p { color: var(--color-text-muted); line-height: 1.6; margin-top: 18px; max-width: 34ch; font-size: 0.96rem; } .footer__cols { display: grid; gap: 34px; grid-template-columns: 1fr 1fr; } .footer__col h4 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 16px; } .footer__col a { display: block; padding: 6px 0; color: var(--color-text-light); font-size: 0.96rem; opacity: 0.85; transition: opacity 0.2s, color 0.2s; } .footer__col a:hover { opacity: 1; color: var(--color-primary); } .footer__bottom { display: flex; flex-direction: column; gap: 18px; padding-top: 30px; } .footer__bottom small { color: var(--color-text-muted); font-size: 13px; } .socials { display: flex; gap: 10px; } .socials a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--hairline-dark); display: grid; place-items: center; color: var(--color-text-light); transition: border-color 0.2s, color 0.2s, transform 0.2s; } .socials a:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); } .socials svg { width: 18px; height: 18px; } /* ---- Visitor-facing accent switcher (kept in the header) ---- */ .accent-dots { display: flex; gap: 10px; } .accent-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--dot); position: relative; cursor: pointer; box-shadow: 0 0 0 2px var(--color-dark), 0 0 0 2px transparent; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .accent-dot:hover { transform: scale(1.12); } .accent-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--color-dark), 0 0 0 4px var(--dot); } .accent-dot[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0.92; } .accent-switch { display: flex; align-items: center; gap: 14px; } .accent-switch--header { gap: 8px; margin-left: auto; padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--hairline-dark); } .accent-switch--header .accent-dots { gap: 8px; } .accent-switch--header .accent-dot { width: 18px; height: 18px; } .accent-switch--header .accent-dot[aria-pressed="true"]::after { width: 6px; height: 6px; } /* =================================================================== PROJECT LIGHTBOX =================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .lightbox.show { opacity: 1; visibility: visible; } .lightbox__scrim { position: absolute; inset: 0; background: rgba(8,8,8,0.74); backdrop-filter: blur(6px); } .lightbox__panel { position: relative; z-index: 1; width: min(820px, 100%); max-height: 90vh; overflow: auto; background: var(--color-dark-2); border: 1px solid var(--hairline-dark); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); transform: translateY(16px) scale(0.98); transition: transform 0.35s var(--ease); } .lightbox.show .lightbox__panel { transform: none; } .lightbox__viz { aspect-ratio: 21 / 9; position: relative; } .lightbox__viz .ovl { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.5; } .lightbox__close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,10,10,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(6px); transition: background 0.2s, transform 0.2s; } .lightbox__close:hover { background: var(--color-primary); color: #1a1206; transform: rotate(90deg); } .lightbox__body { padding: clamp(26px, 4cqi, 44px); color: var(--color-text-light); } .lightbox__body .cat { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); } .lightbox__body h3 { font-size: clamp(1.6rem, 3.5cqi, 2.3rem); font-weight: 600; letter-spacing: -0.02em; margin: 12px 0 18px; } .lightbox__body p { color: var(--color-text-muted); line-height: 1.7; max-width: 60ch; } .lightbox__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .lightbox__tags span { font-family: var(--font-mono); font-size: 12px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,0.05); border: 1px solid var(--hairline-dark); color: var(--color-text-light); } .lightbox__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hairline-dark); } .lightbox__metrics .m .n { font-size: 1.5rem; font-weight: 600; color: var(--color-primary); } .lightbox__metrics .m .l { font-size: 12.5px; color: var(--color-text-muted); margin-top: 4px; } /* =================================================================== SCROLL REVEAL =================================================================== */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal-stagger.is-visible > * { opacity: 1; transform: none; } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; } } /* Fallback: if an environment throttles CSS transitions (offscreen / background tabs), reveal content would stay stuck at opacity:0. body.frozen (set by the probe in app.js) shows everything with no transition so the page is never blank. */ body.frozen .reveal, body.frozen .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } body.frozen .codecard__caret { animation: none; } /* =================================================================== CONTAINER QUERIES - mobile-first, flips up at >= 700c / 860c / 1040c =================================================================== */ @container site (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } .work__grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(4, 1fr); } .footer__cols { grid-template-columns: repeat(3, 1fr); gap: 28px; } } @container site (min-width: 860px) { .nav { display: flex; } .header__cta { display: inline-flex; } .burger { display: none; } .drawer { display: none; } .about__grid { grid-template-columns: 1.4fr 1fr; } .contact__grid { grid-template-columns: 1fr 1fr; } .footer__top { grid-template-columns: 1.3fr 1fr; align-items: start; } .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } .hero__inner { grid-template-columns: 1.15fr 0.85fr; align-items: center; } .codecard { justify-self: end; } } @container site (min-width: 1040px) { .cards { grid-template-columns: repeat(4, 1fr); } } /* Scroll offset for sticky header on anchor jumps */ .section, .footer { scroll-margin-top: 84px; }