/* ============================================================================ ALEXIS TAYLOR — PORTFOLIO STYLESHEET Every page shares this one file. Change something here and it changes everywhere. ─── HOW TO EDIT ──────────────────────────────────────────────────────────── • COLORS → section 1 (:root variables). Change once, applies everywhere. • FONTS → section 1 (--display, --body). • MAX WIDTH → section 1 (--maxw). • Anything else → find the labeled section below (each starts with a big ============ HEADER ============ comment block). SECTIONS: 1. CONFIG (colors, fonts, layout tokens) ← MOST EDITS HAPPEN HERE 2. Base + reset 3. Layout helpers (.wrap) 4. Header / navigation 5. Buttons 6. Scroll progress bar 7. Homepage hero (headline, orbs, embers) 8. Section shells (headings, index numbers) 9. About section 10. Featured case study card (homepage) 11. Category tiles (homepage — gold icons) 12. Capabilities grid 13. Contact section 14. Footer 15. Category pages (Branding / Packaging / Social / Music + Merch) 16. Kona case study page 17. Lightbox (click-to-enlarge on category pages) 18. Reveal-on-scroll animation 19. Reduced-motion accessibility 20. Responsive breakpoints ============================================================================ */ /* ============================================================================ 1. CONFIG — edit colors, fonts, and layout tokens here ============================================================================ */ :root{ /* ---- COLORS ---- change these to re-skin the whole site ---- */ --ink: #0c0a12; /* main background (near-black) */ --ink-2: #13101c; /* slightly lighter dark */ --surface: #1a1626; /* card surface */ --line: rgba(233,221,200,0.12); /* hairline borders */ --text: #f3ece0; /* primary body text (warm cream) */ --muted: #a99f8e; /* secondary/subtle text */ --gold: #e3b04b; /* main accent (links, buttons) */ --gold-soft:#f0cd86; /* italic accents, gradients */ --ember: #d4593b; /* warm accent (gradient stop) */ --violet: #7a5cff; /* cool accent (gradient stop) */ --teal: #39c2b0; /* cool accent (gradient stop) */ /* ---- FONTS ---- loaded from Google Fonts in each page's ---- */ --display:"Fraunces", Georgia, "Times New Roman", serif; /* headlines */ --body: "Inter", system-ui, -apple-system, sans-serif; /* body copy */ /* ---- LAYOUT ---- */ --maxw: 1180px; /* max content width */ } /* ============================================================================ 2. BASE + RESET ============================================================================ */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ background:var(--ink); color:var(--text); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none;} /* atmospheric background gradient */ body::before{ content:""; position:fixed; inset:0; z-index:-2; background: radial-gradient(900px 600px at 12% -5%, rgba(122,92,255,0.18), transparent 60%), radial-gradient(800px 700px at 100% 0%, rgba(227,176,75,0.12), transparent 55%), radial-gradient(1000px 800px at 50% 120%, rgba(212,89,59,0.12), transparent 60%), var(--ink); } /* very subtle grain overlay */ body::after{ content:""; position:fixed; inset:0; z-index:-1; opacity:0.05; pointer-events:none; 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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================================ 3. LAYOUT HELPERS ============================================================================ */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} /* ============================================================================ 4. HEADER / NAVIGATION ============================================================================ */ header{ position:fixed;top:0;left:0;right:0;z-index:50; transition:background .4s ease, border-color .4s ease, padding .4s ease; border-bottom:1px solid transparent; } header.scrolled{ background:rgba(12,10,18,0.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } nav{display:flex;align-items:center;justify-content:space-between;height:74px;} .brand{ font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:.28em; text-transform:uppercase; display:flex;align-items:center;gap:12px; } .brand-mark{height:36px;width:auto;display:block;} .brand span{ background:linear-gradient(90deg,var(--gold) 0%,var(--gold-soft) 50%,var(--gold) 100%); background-size:200% auto; -webkit-background-clip:text;background-clip:text; color:var(--gold); animation:shimmer 6s linear infinite; } @keyframes shimmer{to{background-position:200% center;}} .nav-links{display:flex;gap:34px;align-items:center;} .nav-links a{ font-size:.74rem;letter-spacing:.22em;text-transform:uppercase; color:var(--muted);transition:color .25s ease;position:relative; } .nav-links a::after{ content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0; background:var(--gold);transition:width .3s ease; } .nav-links a:hover{color:var(--text);} .nav-links a:hover::after{width:100%;} /* "Let's talk" nav CTA — solid gold so it stands out from the plain links. */ .nav-cta{ background:var(--gold); border:1px solid var(--gold); border-radius:999px;padding:9px 18px !important; color:#1a1206 !important; font-weight:600; box-shadow:0 6px 24px -10px rgba(227,176,75,.55); transition:background .25s ease, box-shadow .25s ease, transform .25s ease; } .nav-cta:hover{ background:var(--gold-soft); border-color:var(--gold-soft); box-shadow:0 10px 30px -10px rgba(227,176,75,.7); transform:translateY(-1px); } .nav-cta::after{display:none;} .menu-btn{display:none;background:none;border:0;color:var(--text);font-size:1.4rem;cursor:pointer;} /* ============================================================================ 5. BUTTONS ============================================================================ */ .btn{ display:inline-flex;align-items:center;gap:10px; padding:14px 26px;border-radius:999px;font-size:.82rem;letter-spacing:.14em; text-transform:uppercase;font-weight:500; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; } .btn-primary{background:var(--gold);color:#1a1206;box-shadow:0 10px 40px -12px rgba(227,176,75,.6);} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 50px -12px rgba(227,176,75,.7);} .btn-ghost{border:1px solid var(--line);color:var(--text);} .btn-ghost:hover{border-color:var(--gold);transform:translateY(-3px);} /* ============================================================================ 6. SCROLL PROGRESS BAR (top of every page) ============================================================================ */ .progress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:60; background:linear-gradient(90deg,var(--ember),var(--gold),var(--gold-soft)); box-shadow:0 0 12px rgba(227,176,75,.6); transition:width .1s linear; } /* ============================================================================ 7. HOMEPAGE HERO — headline, ember particles, floating orbs ============================================================================ */ .hero{min-height:100vh;display:flex;align-items:center;position:relative;padding-top:74px;} .hero .wrap{position:relative;z-index:3;} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold); margin-bottom:30px; } .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block;} .hero h1{ font-family:var(--display); font-weight:340; font-size:clamp(2.8rem,8vw,6.4rem); line-height:1.02; letter-spacing:-0.01em; max-width:14ch; } .hero h1 em{font-style:italic;color:var(--gold-soft);position:relative;} .hero h1 em::after{ content:"";position:absolute;left:0;bottom:.08em;width:100%;height:2px; background:linear-gradient(90deg,var(--ember),var(--gold-soft)); transform:scaleX(0);transform-origin:left; transition:transform .9s ease; } body.loaded .hero h1 em::after{transform:scaleX(1);transition-delay:1.3s;} .hero p.lead{ margin-top:30px;max-width:54ch;font-size:clamp(1rem,1.5vw,1.18rem); color:var(--muted); } .hero-actions{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap;} .hero-meta{ position:absolute;right:28px;bottom:48px;text-align:right; font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);line-height:2; } .hero-meta strong{color:var(--text);font-weight:500;} /* ember particle canvas */ #embers{position:absolute;inset:0;z-index:1;pointer-events:none;} /* floating colored orbs (blurred glows in background) */ .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:0;pointer-events:none;will-change:transform;} .orb.o1{width:420px;height:420px;left:-80px;top:8%;background:radial-gradient(circle,rgba(122,92,255,.6),transparent 70%);animation:drift1 18s ease-in-out infinite;} .orb.o2{width:360px;height:360px;right:-60px;top:18%;background:radial-gradient(circle,rgba(227,176,75,.5),transparent 70%);animation:drift2 22s ease-in-out infinite;} .orb.o3{width:300px;height:300px;left:40%;bottom:-40px;background:radial-gradient(circle,rgba(212,89,59,.45),transparent 70%);animation:drift3 26s ease-in-out infinite;} @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}} @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,50px)}} @keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-50px)}} /* kinetic hero load-in */ .h-anim{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);} body.loaded .h-anim{opacity:1;transform:none;} body.loaded .h-anim.d1{transition-delay:.15s;} body.loaded .h-anim.d2{transition-delay:.35s;} body.loaded .h-anim.d3{transition-delay:.85s;} body.loaded .h-anim.d4{transition-delay:1.05s;} body.loaded .h-anim.d5{transition-delay:1.25s;} /* headline mask reveal (three lines slide up) */ .h1-mask{display:block;overflow:hidden;} .h1-line{display:block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.16,1,.3,1);} body.loaded .h1-line{transform:translateY(0);} body.loaded .hl2{transition-delay:.12s;} body.loaded .hl3{transition-delay:.24s;} /* "Scroll" cue at bottom of hero */ .scroll-cue{ position:absolute;left:28px;bottom:42px;display:flex;align-items:center;gap:12px; font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);z-index:3; } .scroll-cue .bar{width:46px;height:1px;background:var(--muted);position:relative;overflow:hidden;} .scroll-cue .bar::after{ content:"";position:absolute;inset:0;background:var(--gold); transform:translateX(-100%);animation:cue 2.4s ease-in-out infinite; } @keyframes cue{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}} /* ============================================================================ 8. SECTION SHELLS — section headings + index numbers ============================================================================ */ section{padding:120px 0;position:relative;} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:60px;flex-wrap:wrap;} .sec-index{font-family:var(--display);font-size:.9rem;color:var(--gold);letter-spacing:.2em;} .sec-title{font-family:var(--display);font-weight:360;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.05;} .sec-title em{font-style:italic;color:var(--gold-soft);} .sec-sub{color:var(--muted);max-width:46ch;} /* ============================================================================ 9. ABOUT SECTION Desktop layout uses grid areas so the portrait fills the whole right column while bio+stats sit top-left and the "Outside of work" pillar drops in below. Mobile stacks: bio → portrait → pillar. ============================================================================ */ .about-grid{ display:grid; grid-template-columns:1.3fr .9fr; grid-template-areas: "bio photo" "pillar photo"; gap:44px 64px; align-items:start; } .about-grid .about-bio {grid-area:bio;} .about-grid .about-photo{grid-area:photo; align-self:start;} .about-grid > .pillar {grid-area:pillar;} .about-grid p{color:var(--muted);font-size:1.06rem;margin-bottom:22px;} .about-grid p strong{color:var(--text);font-weight:500;} .about-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:1px solid var(--line);display:block;} .pillar{ border:1px solid var(--line);border-radius:16px;padding:24px; background:rgba(255,255,255,0.02); transition:border-color .3s ease, transform .3s ease; } .pillar:hover{border-color:rgba(227,176,75,.4);transform:translateY(-4px);} .pillar h4{font-family:var(--display);font-weight:500;font-size:1.2rem;margin-bottom:8px;} .pillar .ic{font-size:1.3rem;margin-bottom:12px;display:block;} .pillar p{font-size:.92rem;color:var(--muted);margin:0;} .tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;} .chip{ font-size:.72rem;letter-spacing:.08em;color:var(--gold-soft); border:1px solid rgba(227,176,75,.35);border-radius:999px;padding:6px 13px; background:rgba(227,176,75,.06); transition:background .25s ease,border-color .25s ease; } .chip:hover{background:rgba(227,176,75,.14);border-color:rgba(227,176,75,.6);} .stats{display:flex;gap:48px;margin-top:54px;flex-wrap:wrap;} .stat .num{font-family:var(--display);font-size:2.6rem;color:var(--gold);line-height:1;} .stat .lbl{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px;} /* ============================================================================ 10. FEATURED CASE STUDY CARD (homepage) ============================================================================ */ .case{margin-bottom:84px;} .case-tag{ display:inline-flex;align-items:center;gap:10px; font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold); margin-bottom:16px; } .case-tag::before{content:"";width:30px;height:1px;background:var(--gold);} .case-feature{ display:grid;grid-template-columns:1fr 1fr; border:1px solid var(--line);border-radius:18px;overflow:hidden; background:rgba(255,255,255,.02); transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease; margin-top:6px; } .case-feature:hover{transform:translateY(-5px);box-shadow:0 34px 80px -45px rgba(0,0,0,.9);} .case-feature-media{position:relative;min-height:360px;overflow:hidden;} .case-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;} .case-feature:hover .case-feature-media img{transform:scale(1.05);} .case-feature-body{padding:46px;display:flex;flex-direction:column;justify-content:center;} .case-feature-title{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.04;margin:14px 0 6px;} .case-feature-sub{font-family:var(--display);font-style:italic;color:var(--gold-soft);font-size:1.05rem;margin-bottom:16px;} .case-feature-desc{color:var(--muted);font-size:1rem;margin-bottom:26px;} .case-feature-link{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;} /* ============================================================================ 11. CATEGORY TILES (homepage — gold icons on dark) ============================================================================ */ .more-head{margin:0 0 26px;} .more-head .sec-index{font-family:var(--display);color:var(--gold);letter-spacing:.2em;font-size:.95rem;} .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;} .cat-tile{ position:relative;overflow:hidden; border-radius:16px;border:1px solid var(--line); aspect-ratio:3/2; display:flex;flex-direction:column;justify-content:space-between; padding:24px 22px;text-align:center; background:linear-gradient(165deg,rgba(26,22,38,.92),rgba(12,10,18,.96)); transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease; } .cat-tile::before{ content:"";position:absolute;left:50%;top:34%; width:160px;height:160px;transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(227,176,75,.16),transparent 68%); opacity:0;transition:opacity .4s ease;pointer-events:none; } .cat-tile:hover{transform:translateY(-6px);box-shadow:0 24px 50px -28px rgba(0,0,0,.8);border-color:rgba(227,176,75,.4);} .cat-tile:hover::before{opacity:1;} .cat-icon{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;} .cat-icon svg{ width:60px;height:60px; fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 12px rgba(227,176,75,.28)); transition:transform .4s ease,stroke .3s ease; } .cat-tile:hover .cat-icon svg{transform:scale(1.08);stroke:var(--gold-soft);} .cat-meta{position:relative;z-index:2;} .cat-name{font-family:var(--display);font-size:1.25rem;} .cat-line{font-size:.82rem;color:var(--muted);margin-top:3px;} /* ============================================================================ 12. CAPABILITIES GRID ============================================================================ */ .cap-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden; } .cap{background:var(--ink);padding:36px 30px;transition:background .3s ease;} .cap:hover{background:var(--ink-2);} .cap .n{font-family:var(--display);color:var(--gold);font-size:.9rem;letter-spacing:.2em;} .cap h4{font-family:var(--display);font-weight:480;font-size:1.3rem;margin:14px 0 10px;} .cap p{color:var(--muted);font-size:.92rem;} /* ============================================================================ 13. CONTACT SECTION + FORM ============================================================================ */ .contact{text-align:center;padding:140px 0 90px;} .contact h2{font-family:var(--display);font-weight:340;font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.05;} .contact h2 em{font-style:italic;color:var(--gold-soft);} .contact-sub{color:var(--muted);margin-top:22px;font-size:1.05rem;max-width:44ch;margin-left:auto;margin-right:auto;} .contact .mail{ display:inline-block;margin-top:34px; font-family:var(--display);font-size:clamp(1.2rem,3vw,2rem); color:var(--gold); border-bottom:1px solid rgba(227,176,75,.4);padding-bottom:6px; transition:border-color .3s ease; } .contact .mail:hover{border-color:var(--gold);} /* ---- Contact form ---- */ .form{ max-width:600px;margin:44px auto 0;text-align:left; display:flex;flex-direction:column;gap:18px; } .form-row{display:flex;flex-direction:column;gap:8px;} .form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .form label{ font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; color:var(--muted); } .form input,.form textarea{ width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--text); font-family:var(--body); font-size:1rem; line-height:1.5; transition:border-color .25s ease, background .25s ease, box-shadow .25s ease; } .form input::placeholder,.form textarea::placeholder{color:rgba(169,159,142,.55);} .form input:hover,.form textarea:hover{border-color:rgba(233,221,200,.22);} .form input:focus,.form textarea:focus{ outline:none; border-color:rgba(227,176,75,.7); background:rgba(255,255,255,.05); box-shadow:0 0 0 4px rgba(227,176,75,.08); } .form textarea{min-height:170px;resize:vertical;} .form input:invalid:not(:placeholder-shown),.form textarea:invalid:not(:placeholder-shown){ border-color:rgba(212,89,59,.6); } /* Kill Chrome/Safari's autofill styling so autofilled inputs stay dark + cream. Trick: a giant inset box-shadow overrides the background (which browsers don't let you set directly on autofill), and -webkit-text-fill-color overrides the text color. transition delay hides any autofill flash. */ .form input:-webkit-autofill, .form input:-webkit-autofill:hover, .form input:-webkit-autofill:focus, .form input:-webkit-autofill:active, .form textarea:-webkit-autofill, .form textarea:-webkit-autofill:hover, .form textarea:-webkit-autofill:focus{ -webkit-text-fill-color: var(--text) !important; -webkit-box-shadow: 0 0 0 1000px #14111d inset !important; box-shadow: 0 0 0 1000px #14111d inset !important; caret-color: var(--text) !important; border: 1px solid var(--line) !important; transition: background-color 5000s ease-in-out 0s !important; } .form input:-webkit-autofill:focus, .form textarea:-webkit-autofill:focus{ border-color: rgba(227,176,75,.7) !important; } .form-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px;} .form-actions .btn{cursor:pointer;border:0;font-family:var(--body);} .form-status{ min-height:1.4em;text-align:center; font-size:.9rem;letter-spacing:.02em;color:var(--muted); } .form-status.success{color:var(--gold-soft);} .form-status.error{color:var(--ember);} .form-fallback{ margin-top:28px;text-align:center; font-size:.82rem;letter-spacing:.06em;color:var(--muted); } .form-fallback a{color:var(--gold);border-bottom:1px solid rgba(227,176,75,.3);padding-bottom:1px;} .form-fallback a:hover{border-bottom-color:var(--gold);} /* ============================================================================ 14. FOOTER ============================================================================ */ footer{border-top:1px solid var(--line);padding:46px 0 30px;} .foot-logo{height:92px;width:auto;display:block;margin:0 auto 30px;opacity:.95;} .foot{ display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:14px; font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } /* ============================================================================ 15. CATEGORY PAGES (Branding / Packaging / Social / Music + Merch) ============================================================================ */ .cat-page{padding:132px 0 100px;min-height:100vh;} .back-link{ display:inline-block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);margin-bottom:34px;transition:color .25s ease; } .back-link:hover{color:var(--gold);} .cat-hero{margin-bottom:54px;max-width:62ch;} .cat-hero .sec-index{font-family:var(--display);color:var(--gold);letter-spacing:.2em;font-size:.95rem;} .cat-h1{font-family:var(--display);font-weight:360;font-size:clamp(2.4rem,6vw,4rem);line-height:1.04;margin:8px 0 16px;} .cat-h1 em{font-style:italic;color:var(--gold-soft);} .cat-intro{color:var(--muted);font-size:1.08rem;} .proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:34px 26px;} .proj-card{display:flex;flex-direction:column;} .proj-cover{ position:relative;aspect-ratio:3/2; border-radius:16px;overflow:hidden;border:1px solid var(--line); display:flex;align-items:center;justify-content:center; box-shadow:0 24px 56px -40px rgba(0,0,0,.85); cursor:zoom-in; } .proj-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;} .proj-card:hover .proj-cover img{transform:scale(1.04);} .proj-info{padding:16px 2px 0;} .proj-tag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);} .proj-info h3{font-family:var(--display);font-weight:480;font-size:1.28rem;margin:7px 0 7px;} .proj-info p{color:var(--muted);font-size:.92rem;} /* Shown on project cards that link to a full case study. */ .proj-link{ display:inline-block;margin-top:10px; font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:var(--gold); border-bottom:1px solid rgba(227,176,75,.35);padding-bottom:2px; transition:border-color .25s ease, color .25s ease; } .proj-link:hover{border-bottom-color:var(--gold);color:var(--gold-soft);} /* ============================================================================ 16. KONA CASE STUDY PAGE ============================================================================ */ .cs-wrap{max-width:1080px;} .cs-head{padding:128px 0 8px;} .cs-eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold); margin-bottom:18px; } .cs-eyebrow::before{content:"";width:30px;height:1px;background:var(--gold);} .cs-title{font-family:var(--display);font-weight:380;font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02;text-align:left;} .cs-sub{font-family:var(--display);font-style:italic;color:var(--gold-soft);font-size:clamp(1.1rem,2.4vw,1.5rem);margin-top:10px;text-align:left;} .cs-intro{color:var(--muted);font-size:1.1rem;max-width:66ch;margin-top:22px;text-align:left;} .cs-meta{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 8px;} .cs-meta .m{ font-size:.7rem;letter-spacing:.08em;color:var(--gold-soft); border:1px solid rgba(227,176,75,.3);border-radius:999px;padding:6px 13px; background:rgba(227,176,75,.05); } .cs-hero-img{margin:34px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(0,0,0,.9);} .cs-hero-img img{display:block;width:100%;height:clamp(260px,40vw,460px);object-fit:cover;} /* Use --natural when the hero image needs to show at its full aspect ratio (no cropping). Good for wide product shots where the top or bottom is important. */ .cs-hero-img--natural img{height:auto;object-fit:contain;} /* Small caption line below the hero image (e.g., photo credit or context). */ .cs-hero-caption{ margin-top:14px;text-align:center; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } /* Impact callout box — small stats strip that appears near the top of a case study. Three columns of a gold number/word + a small caps label. */ .cs-impact{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; padding:28px 26px; margin:34px 0 0; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); box-shadow:0 20px 50px -40px rgba(0,0,0,.85); } .cs-impact-item{text-align:center;position:relative;} .cs-impact-item + .cs-impact-item::before{ content:"";position:absolute;left:-10px;top:14%;height:72%;width:1px;background:var(--line); } .cs-impact-num{ font-family:var(--display); font-weight:420; font-size:clamp(1.5rem, 3.2vw, 2.3rem); color:var(--gold); line-height:1.05; letter-spacing:.01em; } .cs-impact-lbl{ margin-top:10px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); line-height:1.5; } @media(max-width:640px){ .cs-impact{grid-template-columns:1fr;gap:14px;padding:22px;} .cs-impact-item + .cs-impact-item::before{ left:14%;top:-8px;height:1px;width:72%; } } /* Career timeline — used to show role progression at a long tenure client. Horizontal band of 4 items, each with a gold dot connected by a subtle gradient line, plus year, role, and one-liner underneath. */ .cs-timeline{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; padding:36px 28px 32px; margin-top:26px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); position:relative; } .cs-timeline::before{ content:"";position:absolute; left:12%;right:12%;top:52px;height:1px; background:linear-gradient(90deg,transparent,var(--line) 12%,rgba(227,176,75,.4) 50%,var(--line) 88%,transparent); } .cs-tl-item{position:relative;text-align:center;z-index:1;} .cs-tl-item::before{ content:"";display:block; width:10px;height:10px;border-radius:50%; background:var(--gold); margin:0 auto 20px; box-shadow:0 0 0 5px var(--ink),0 0 14px rgba(227,176,75,.6); } .cs-tl-year{ font-size:.7rem;letter-spacing:.22em;text-transform:uppercase; color:var(--gold-soft);margin-bottom:8px; } .cs-tl-role{ font-family:var(--display);font-weight:420; font-size:1.15rem;color:var(--text);line-height:1.2; margin-bottom:8px; } .cs-tl-note{font-size:.86rem;color:var(--muted);line-height:1.5;} @media(max-width:900px){ .cs-timeline{grid-template-columns:1fr 1fr;gap:32px 20px;} .cs-timeline::before{display:none;} } @media(max-width:640px){ .cs-timeline{grid-template-columns:1fr;padding:26px;} } .cs-section{padding:54px 0;border-top:1px solid var(--line);} .cs-num{font-family:var(--display);color:var(--gold);letter-spacing:.16em;font-size:.95rem;} .cs-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.08;margin:8px 0 16px;text-align:left;} .cs-body{color:var(--muted);font-size:1.05rem;line-height:1.75;max-width:70ch;text-align:left;} .cs-gallery{column-count:2;column-gap:16px;margin-top:26px;} .cs-gallery img{ width:100%;display:block;margin:0 0 16px; border-radius:14px;border:1px solid var(--line); box-shadow:0 20px 50px -38px rgba(0,0,0,.8); break-inside:avoid; } /* Variant for galleries where two images should read as a pair at the same height, regardless of their native aspect ratios. Uses object-fit:contain so nothing gets cropped — any leftover space letterboxes against the site's dark background and stays invisible. */ .cs-gallery--equal{ column-count:auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; } .cs-gallery--equal img{ width:100%; height:clamp(360px, 42vw, 560px); object-fit:contain; margin:0; border-radius:14px;border:1px solid var(--line); box-shadow:0 20px 50px -38px rgba(0,0,0,.8); background:rgba(12,10,18,.5); } @media(max-width:760px){ .cs-gallery--equal{grid-template-columns:1fr;} .cs-gallery--equal img{height:auto;} } .cs-results-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:8px;} .cs-bignum{font-family:var(--display);font-weight:420;font-size:clamp(3rem,8vw,5rem);color:var(--gold);line-height:1;} .cs-bignum span{display:block;font-family:var(--body);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:14px;} .cs-list{list-style:none;padding:0;margin:18px 0 0;} .cs-list li{position:relative;padding:0 0 14px 26px;color:var(--muted);font-size:1.02rem;text-align:left;} .cs-list li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--gold);} .cs-results-img{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -45px rgba(0,0,0,.85);} .cs-results-img img{display:block;width:100%;height:auto;} .cs-cta{padding:60px 0 10px;border-top:1px solid var(--line);text-align:left;} .cs-cta a{ display:inline-flex;align-items:center;gap:10px; background:var(--gold);color:#1a1206; padding:14px 26px;border-radius:999px; font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500; transition:transform .25s ease; } .cs-cta a:hover{transform:translateY(-3px);} /* ============================================================================ 17. LIGHTBOX (click-to-enlarge on category pages) ============================================================================ */ .lightbox{ position:fixed;inset:0;z-index:200; background:rgba(8,6,12,.94);backdrop-filter:blur(8px); display:none;align-items:center;justify-content:center;padding:48px; cursor:zoom-out;opacity:0;transition:opacity .3s ease; } .lightbox.open{display:flex;opacity:1;} .lightbox img{ max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain; border-radius:10px;box-shadow:0 50px 130px -40px rgba(0,0,0,.9); animation:lbpop .35s cubic-bezier(.2,.7,.2,1); } @keyframes lbpop{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}} .lightbox-close{ position:fixed;top:22px;right:30px;z-index:201; width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px; color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer; transition:color .2s,border-color .2s,background .2s; } .lightbox-close:hover{color:var(--gold);border-color:var(--gold);background:rgba(227,176,75,.1);} .lightbox-hint{ position:fixed;bottom:26px;left:0;right:0;text-align:center;z-index:201; font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted); pointer-events:none; } /* ============================================================================ 18. REVEAL-ON-SCROLL animation (add class="reveal" to any element) ============================================================================ */ .reveal{ opacity:0;transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.in{opacity:1;transform:none;} /* ============================================================================ 19. REDUCED MOTION — respect users who don't want animations ============================================================================ */ @media (prefers-reduced-motion: reduce){ *{animation:none !important;} .h-anim,.h1-line{opacity:1 !important;transform:none !important;transition:none !important;} #embers,.orb{display:none;} .lightbox img{animation:none;} } /* ============================================================================ 20. RESPONSIVE BREAKPOINTS ============================================================================ */ @media(max-width:900px){ .about-grid{ grid-template-columns:1fr; grid-template-areas: "bio" "photo" "pillar"; gap:32px; } .cap-grid{grid-template-columns:1fr;} .hero-meta{display:none;} .case-feature{grid-template-columns:1fr;} .case-feature-media{min-height:240px;} .case-feature-body{padding:32px;} } @media(max-width:760px){ .cs-gallery{column-count:1;} .cs-results-row{grid-template-columns:1fr;gap:24px;} } @media(max-width:640px){ .nav-links{ position:fixed;inset:74px 0 auto 0; background:rgba(12,10,18,.97);backdrop-filter:blur(14px); flex-direction:column;gap:0;padding:14px 0; border-bottom:1px solid var(--line); transform:translateY(-130%);transition:transform .4s ease; } .nav-links.open{transform:translateY(0);} .nav-links a{padding:14px 28px;width:100%;} .menu-btn{display:block;} .proj-grid{grid-template-columns:1fr;} section{padding:80px 0;} .stats{gap:28px;} }