/* ========================================================================== Yenny Martin — Portfolio Site Shared stylesheet. Source of truth for visuals: reference/design.dc.html See partials/CONVENTIONS.md for the class index and page-assembly order. ========================================================================== */ /* ---- Tokens -------------------------------------------------------------- */ :root{ --accent: #8f9fe6; /* periwinkle — randomized per page load, see the inline script */ --accent-deep: #5f6fce; --on-accent: #201e1a; /* text/glyph color that sits ON an --accent fill; flips light for dark accents */ --ink: #201e1a; /* near-black, borders + dark bg */ --bg: #e7e1d3; /* cream */ --bg-alt: #ece6d8; /* slightly lighter section bg */ --stone: #ada695; /* warm gray section bg */ --body: #3c382f; /* body text on cream */ --body-deep: #2e2a24; /* long-form body text */ --muted: #6a6456; /* section-header right labels, eyebrows */ --muted-stone: #4a4535; /* eyebrow/labels on stone bg */ --error: #b5462f; --field-bg: #f4efe3; --footer-mut: #8a8272; /* footer label */ --footer-link: #c3bba9; /* footer link resting color */ --grain: .19; --anim: running; /* set to "paused" to freeze all keyframe animation */ --font-stack: 'Helvetica Neue',Helvetica,Arial,sans-serif; } /* Accent randomizes on each page load — the inline script picks one of six [--accent, --accent-deep, --on-accent] triples. --accent-deep is a darker shade for text/links on cream; --on-accent flips to light for dark accents so text on accent-filled buttons/bands stays legible. */ /* ---- Reset & base --------------------------------------------------------- */ *{box-sizing:border-box} html,body{margin:0} body{ background:var(--bg); font-family:var(--font-stack); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} input,textarea,button,select{font-family:inherit} img{max-width:100%;display:block} button{background:none;border:none;padding:0} /* Outer page wrapper (one per page, wraps grain + header + main + footer) */ .page-shell{ position:relative; overflow-x:hidden; min-height:100vh; background:var(--bg); } /* Generic content container: max-width 1200, centered */ .container{max-width:1200px;margin:0 auto} /* Fades each page's
in on load */ .page-main{animation:fadeUp .5s ease both} /* ---- Keyframes (timings exact — do not change) --------------------------- */ @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes blkA{0%,100%{transform:translate(0,0)}50%{transform:translate(11px,-15px)}} @keyframes blkB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-10px,12px) scale(1.05)}} @keyframes blkC{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-11px)}} @keyframes blkD{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9px,9px) scale(1.06)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ---- Accessibility helpers ------------------------------------------------ */ .visually-hidden{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:8px; top:-48px; z-index:100; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:2px; font:700 13px var(--font-stack); transition:top .2s ease; } .skip-link:focus{top:8px} a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; } /* ---- Grain overlay -------------------------------------------------------- Fixed full-viewport dot-grain texture. Sits above section backgrounds, below interactive content (z-index 8). Never intercepts clicks. */ .grain-overlay{ position:fixed; inset:0; z-index:8; pointer-events:none; opacity:var(--grain); mix-blend-mode:multiply; background-image:radial-gradient(rgba(32,30,26,.6) .5px,transparent .7px); background-size:3px 3px; } /* ---- Background utilities (section-level surfaces) ------------------------ */ .bg-cream{background:var(--bg)} .bg-cream-alt{background:var(--bg-alt)} .bg-stone{background:var(--stone)} .bg-accent-section{background:var(--accent)} .bg-ink{background:var(--ink)} /* ---- Art-placeholder background-color utilities --------------------------- One class per distinct placeholder color found in the reference. Applied alongside .art-card / .art-portrait / .art-hero + an aspect-ratio utility. */ .bg-b8b2a4{background-color:#b8b2a4} .bg-ada695{background-color:#ada695} .bg-bdb7a8{background-color:#bdb7a8} .bg-b0a99b{background-color:#b0a99b} .bg-c7c1b2{background-color:#c7c1b2} .bg-a8a293{background-color:#a8a293} .bg-bcb5a4{background-color:#bcb5a4} .bg-c2bcad{background-color:#c2bcad} /* ---- Aspect-ratio utilities ------------------------------------------------ */ .ar-1-1{aspect-ratio:1/1} .ar-4-5{aspect-ratio:4/5} .ar-3-4{aspect-ratio:3/4} .ar-4-3{aspect-ratio:4/3} .ar-5-4{aspect-ratio:5/4} /* ========================================================================== Header ========================================================================== */ .site-header{ position:sticky; top:0; z-index:40; background:rgba(231,225,211,.86); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); border-bottom:2px solid var(--ink); } .header-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:15px clamp(20px,5vw,56px); } .logo-link{display:flex;align-items:center;gap:11px;cursor:pointer} .logo-dot{width:24px;height:24px;background:var(--accent);border-radius:50%} .logo-text{font:700 19px var(--font-stack);letter-spacing:-.02em} /* Desktop nav — hidden below 820px */ .nav-desktop{display:flex;align-items:center;gap:26px} @media (max-width:819.98px){ .nav-desktop{display:none} } .nav-link{font:500 15px var(--font-stack);cursor:pointer} .nav-link:hover{color:var(--accent-deep)} .nav-cta{ padding:10px 18px; border-radius:2px; background:var(--ink); color:var(--bg); font:700 14px var(--font-stack); cursor:pointer; } .nav-cta:hover{background:var(--accent-deep)} /* Hamburger — hidden at ≥820px */ .hamburger-btn{ display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer; } @media (min-width:820px){ .hamburger-btn{display:none} } .hamburger-bar{width:24px;height:2px;background:var(--ink);display:block} /* Mobile menu panel — hidden via [hidden] attribute, toggled by JS */ .mobile-menu{ border-top:2px solid var(--ink); background:var(--bg); padding:8px clamp(20px,5vw,56px) 18px; display:flex; flex-direction:column; } .mobile-menu[hidden]{display:none} @media (min-width:820px){ .mobile-menu{display:none !important} } .mobile-menu-link{ padding:14px 0; border-bottom:1px solid rgba(32,30,26,.14); font:700 17px var(--font-stack); cursor:pointer; } .mobile-cta{ margin-top:14px; padding:14px 18px; border-radius:2px; background:var(--ink); color:var(--bg); font:700 15px var(--font-stack); text-align:center; cursor:pointer; display:block; width:100%; } /* ========================================================================== Badges / tags / eyebrows ========================================================================== */ .badge-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px} .badge{ border:1.5px solid var(--ink); padding:6px 12px; border-radius:2px; font:700 11px var(--font-stack); letter-spacing:.12em; text-transform:uppercase; display:inline-block; } .tag-chip{ border:1.5px solid var(--ink); padding:8px 13px; border-radius:2px; font:600 13px var(--font-stack); display:inline-block; cursor:pointer; background:none; color:var(--ink); transition:background-color .15s ease,color .15s ease,border-color .15s ease; } /* selected = filled with the (per-load) accent; --on-accent keeps text legible */ .tag-chip[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); } @media (hover:hover){ .tag-chip:hover{border-color:var(--accent-deep);color:var(--accent-deep)} .tag-chip[aria-pressed="true"]:hover{color:var(--on-accent)} } /* small inline hint next to the "Project" label */ .field-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)} .tag-new-print{ position:absolute; right:2%; top:2%; z-index:4; border:2px solid var(--ink); background:var(--bg); padding:8px 13px; border-radius:2px; font:700 11px var(--font-stack); letter-spacing:.1em; text-transform:uppercase; } /* Eyebrow labels — three color/spacing variants used across pages */ .eyebrow{ font:700 11px var(--font-stack); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); } .eyebrow-stone{ font:700 11px var(--font-stack); letter-spacing:.18em; text-transform:uppercase; color:var(--muted-stone); } .eyebrow-accent{ font:700 11px var(--font-stack); letter-spacing:.2em; text-transform:uppercase; color:var(--on-accent); opacity:.68; } /* ========================================================================== Section header row (title + right-hand label, 2px ink bottom border) ========================================================================== */ .section-header{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; border-bottom:2px solid var(--ink); } .section-header--home{gap:10px;padding-bottom:16px;margin-bottom:30px} .section-header--compact{gap:8px;padding-bottom:14px;margin-bottom:28px} .section-header--clients{gap:8px;padding-bottom:14px;margin-bottom:26px} .section-title{ font:700 clamp(26px,4vw,38px) var(--font-stack); letter-spacing:-.025em; margin:0; } .section-title--sm{ font:700 clamp(22px,3vw,30px) var(--font-stack); letter-spacing:-.02em; margin:0; } .section-label{ font:700 11px var(--font-stack); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } /* ========================================================================== Buttons ========================================================================== */ .btn-accent{ padding:14px 24px; background:var(--accent); color:var(--on-accent); border-radius:2px; font:700 15px var(--font-stack); cursor:pointer; display:inline-block; } .btn-accent:hover{background:var(--accent-deep)} .btn-outline{ padding:14px 24px; border:2px solid var(--ink); border-radius:2px; font:700 15px var(--font-stack); cursor:pointer; display:inline-block; background:transparent; } .btn-outline:hover{background:var(--ink);color:var(--bg)} .btn-mission{ display:inline-block; margin-top:32px; padding:14px 26px; background:var(--ink); color:var(--bg); border-radius:2px; font:700 14px var(--font-stack); cursor:pointer; } .btn-mission:hover{background:#000} .btn-submit{ width:100%; padding:15px 20px; background:var(--ink); color:var(--bg); border:none; border-radius:2px; font:700 15px var(--font-stack); cursor:pointer; } .btn-submit:hover{background:var(--accent-deep)} .cta-row{display:flex;gap:12px;flex-wrap:wrap} /* ========================================================================== Underlined text links ========================================================================== */ .link-underline{ border-bottom:2px solid var(--accent); cursor:pointer; } .link-underline:hover{color:var(--accent-deep)} .link-more{ display:inline-block; margin-top:22px; font:700 14px var(--font-stack); border-bottom:2px solid var(--accent); padding-bottom:2px; cursor:pointer; } .link-more:hover{color:var(--accent-deep)} .link-bio{ color:var(--accent-deep); font-weight:700; border-bottom:2px solid var(--accent); } .email-link{ font:700 clamp(18px,2.4vw,24px) var(--font-stack); letter-spacing:-.01em; } .email-link:hover{color:var(--accent-deep)} /* inline inside body copy (e.g. the contact success message) */ .email-link--inline{ font:inherit; font-weight:700; color:var(--accent-deep); border-bottom:2px solid var(--accent); } .text-accent-strong{color:var(--accent-deep);font-weight:700} .text-accent-deep{color:var(--accent-deep)} .underline-accent{ text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:4px; text-underline-offset:6px; } /* ========================================================================== Art placeholders (hatched blocks) ========================================================================== */ /* Product/portfolio cards — hover-lift capable, lighter hatch */ .art-card{ background-image:repeating-linear-gradient(135deg,rgba(32,30,26,.06) 0 13px,transparent 13px 26px); border:1px solid var(--ink); transition:transform .5s cubic-bezier(.2,.8,.2,1); } .art-card:hover{transform:translateY(-8px)} /* Portrait-style placeholders — static (no hover), heavier hatch, caption overlay */ .art-portrait{ position:relative; border:1px solid var(--ink); background-image:repeating-linear-gradient(135deg,rgba(32,30,26,.07) 0 13px,transparent 13px 26px); } .art-portrait--teaser{ background-image:repeating-linear-gradient(135deg,rgba(32,30,26,.07) 0 12px,transparent 12px 24px); } .portrait-caption{ position:absolute; font:700 11px var(--font-stack); letter-spacing:.1em; text-transform:uppercase; color:rgba(32,30,26,.5); } .portrait-caption--about{left:14px;bottom:12px} .portrait-caption--teaser{left:13px;bottom:11px} /* Home hero composition image — static, heavier hatch, drop shadow */ .art-hero{ background-image:repeating-linear-gradient(135deg,rgba(32,30,26,.07) 0 13px,transparent 13px 26px); border:1px solid var(--ink); box-shadow:0 14px 32px rgba(32,30,26,.18); } /* Real artwork inside the frames: fill and crop; the hatched tint stays visible while the image loads. */ .art-card img,.art-portrait img,.art-hero img{display:block;width:100%;height:100%;object-fit:cover} .art-card--logo img{object-fit:contain;padding:9%} /* transparent marks sit on the tinted paper */ .art-card--doc img{object-position:top} /* tall documents: keep the header in frame */ /* Caption overlays sit on a photo (not hatch) once an image is present */ .art-portrait img~.portrait-caption{color:rgba(231,225,211,.85);text-shadow:0 1px 6px rgba(32,30,26,.55)} /* ========================================================================== Floating decorative blocks (home hero + mission band) ========================================================================== */ .float-a{ position:absolute;top:5%;right:0;width:64%;height:74%; background:var(--accent); animation:blkA 12s ease-in-out infinite; animation-play-state:var(--anim); z-index:1; } .float-b{ position:absolute;bottom:0;left:1%;width:44%;height:44%; background:var(--stone); animation:blkB 15s ease-in-out infinite; animation-play-state:var(--anim); z-index:1; } .float-c{ position:absolute;left:-30px;top:-24px;width:180px;height:180px; background:rgba(231,225,211,.5); animation:blkC 13s ease-in-out infinite; animation-play-state:var(--anim); } .float-d{ position:absolute;right:-28px;bottom:-30px;width:200px;height:200px; background:rgba(32,30,26,.14); animation:blkD 17s ease-in-out infinite; animation-play-state:var(--anim); } /* ========================================================================== Home — hero ========================================================================== */ .hero-home{ padding:clamp(34px,5vw,64px) clamp(20px,5vw,56px) clamp(46px,7vw,78px); } .hero-home-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(30px,5vw,52px); align-items:center; } .hero-h1{ font:700 clamp(38px,6.4vw,72px) var(--font-stack); line-height:1.0; letter-spacing:-.035em; text-wrap:balance; } .hero-h1--home{margin:0} .hero-h1--art{margin:16px 0 0;max-width:14ch} .hero-h1--design{margin:16px 0 0} .hero-h1--about{margin:16px 0 clamp(30px,4vw,44px)} .hero-h1--contact{margin:16px 0 clamp(36px,5vw,52px);max-width:15ch} .hero-intro{ font:400 clamp(15px,1.6vw,17px) var(--font-stack); line-height:1.55; color:var(--body); } .hero-intro--home{max-width:440px;margin:24px 0 30px} .hero-intro--design{max-width:600px;margin:22px 0 0} .hero-intro--art{max-width:600px;margin:22px 0 0} /* The copy column must always paint above the art composition: at column widths narrower than the h1's longest token the text overflows the grid track, and without this it disappears under the z-indexed float blocks / print card. */ .hero-home-grid>div:first-child{position:relative;z-index:4} .hero-art{position:relative;width:100%;max-width:440px;margin:0 auto} .hero-art-card{position:relative;z-index:3;width:80%;margin:0 auto} .art-caption-row{ display:flex; justify-content:space-between; align-items:center; margin-top:11px; font:700 11px var(--font-stack); letter-spacing:.1em; text-transform:uppercase; } /* ========================================================================== Marquee strip (home only) ========================================================================== */ .marquee-strip{ background:var(--ink); color:var(--bg); padding:14px 0; overflow:hidden; } .marquee-track{ display:inline-flex; white-space:nowrap; font:700 clamp(13px,1.5vw,15px) var(--font-stack); letter-spacing:.06em; text-transform:uppercase; animation:marq 28s linear infinite; animation-play-state:var(--anim); will-change:transform; } .marquee-star{color:var(--accent)} /* ========================================================================== Selected prints (home) / portfolio grids (design) ========================================================================== */ .section-prints{padding:clamp(48px,7vw,80px) clamp(20px,5vw,56px)} .prints-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(18px,2.4vw,26px); } .print-card{display:block;cursor:pointer} .print-card:hover{color:var(--accent-deep)} .print-caption{ margin-top:11px; font:700 11px var(--font-stack); letter-spacing:.1em; text-transform:uppercase; } /* Design page portfolio sections */ .hero-page{ padding-top:clamp(46px,7vw,88px); padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px); } .hero-page--art{padding-bottom:clamp(28px,4vw,40px)} .hero-page--design{padding-bottom:clamp(28px,4vw,40px)} .hero-page--about{padding-bottom:clamp(40px,5vw,60px)} .hero-page--contact{padding-bottom:clamp(56px,8vw,96px)} .portfolio-section{ padding-top:clamp(20px,3vw,34px); padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px); } .portfolio-section--mid{padding-bottom:clamp(30px,4vw,44px)} .portfolio-section--last{padding-bottom:clamp(48px,7vw,80px)} .portfolio-grid{ display:grid; gap:clamp(18px,2.4vw,26px); } .portfolio-grid--sq{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .portfolio-grid--wide{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} /* ========================================================================== Design page — section cards (two-column grid) + lightbox Each section is a card: heading + count, one large preview image, and a strip of small icon thumbnails. Clicking the preview or any thumbnail opens the lightbox at that piece. Two columns on desktop, one on mobile. ========================================================================== */ .cards-wrap{padding:clamp(20px,3vw,34px) clamp(20px,5vw,56px) clamp(48px,7vw,80px)} .section-cards{ max-width:1200px;margin:0 auto; display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,34px); align-items:start; } @media (max-width:760px){ .section-cards{grid-template-columns:1fr} } .sec-card{ background:#f1eee5; /* cool antique white — borderless panel on the paper bg */ padding:clamp(16px,2vw,24px); display:flex;flex-direction:column;gap:13px; } .sec-card-head{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding-bottom:11px;border-bottom:2px solid var(--ink); } .sec-card-title{font:700 clamp(19px,2.3vw,26px) var(--font-stack);letter-spacing:-.02em;margin:0} .sec-card-count{font:700 11px var(--font-stack);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none} .sec-card-desc{font:400 14px/1.45 var(--font-stack);color:var(--muted);margin:-3px 0 1px} /* Preview + thumbnails share the framed, hatched-paper look. */ .sec-preview,.sec-thumb{ padding:0;border:1px solid var(--ink);cursor:pointer;overflow:hidden; background:var(--bg) repeating-linear-gradient(135deg,rgba(32,30,26,.06) 0 13px,transparent 13px 26px); transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease; } .sec-preview{display:block;width:100%;aspect-ratio:4/3} .sec-preview img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)} .sec-thumbs{display:flex;flex-wrap:wrap;gap:8px} .sec-thumb{width:clamp(46px,6vw,60px);aspect-ratio:1/1} .sec-thumb img{width:100%;height:100%;object-fit:cover;display:block} /* Logos: show the whole mark, don't crop, and drop the hatch behind the preview so marks sit on clean paper. Documents: keep the header in frame. */ .sec-card--logos .sec-preview img,.sec-card--logos .sec-thumb img{object-fit:contain} .sec-card--logos .sec-preview img{padding:9%} .sec-card--logos .sec-thumb img{padding:14%} .sec-card--logos .sec-preview{background:var(--bg)} .sec-card--doc .sec-preview img{object-position:top} @media (hover:hover){ .sec-preview:hover,.sec-thumb:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(32,30,26,.16)} .sec-preview:hover img{transform:scale(1.04)} } .sec-preview:focus-visible,.sec-thumb:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px} /* ========================================================================== Art page — print gallery (masonry columns, uncropped) ========================================================================== */ .art-section{padding:clamp(20px,3vw,34px) clamp(20px,5vw,56px) clamp(48px,7vw,80px)} .art-gallery{ max-width:1200px;margin:0 auto; columns:300px; column-gap:clamp(18px,2.4vw,28px); } .art-item-fig{ break-inside:avoid;-webkit-column-break-inside:avoid; margin:0 0 clamp(22px,3vw,34px); } .art-item{ display:block;width:100%;padding:0; border:1px solid var(--ink);background:none;cursor:pointer;overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease; } .art-item img{ display:block;width:100%;height:auto; transition:transform .7s cubic-bezier(.2,.8,.2,1); } @media (hover:hover){ .art-item:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(32,30,26,.2)} .art-item:hover img{transform:scale(1.04)} } .art-item:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px} .art-caption{margin-top:10px;font:700 11px var(--font-stack);letter-spacing:.1em;text-transform:uppercase} /* ---- Lightbox ----------------------------------------------------------- */ .lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center} .lightbox[hidden]{display:none} .lb-backdrop{position:absolute;inset:0;background:rgba(20,19,17,.94);cursor:zoom-out} .lb-figure{ position:relative;z-index:1;margin:0; max-width:min(92vw,1200px);max-height:88vh; display:flex;flex-direction:column;align-items:center;gap:14px; } .lb-img{max-width:100%;max-height:78vh;object-fit:contain;background:var(--bg);border:1px solid rgba(231,225,211,.22)} .lb-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 14px;color:var(--bg);text-align:center} .lb-title{font:700 16px var(--font-stack);letter-spacing:-.01em} .lb-meta{font:700 11px var(--font-stack);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .lb-counter{font:700 11px var(--font-stack);letter-spacing:.12em;color:rgba(231,225,211,.5)} .lb-close,.lb-nav{ position:absolute;z-index:2; background:rgba(231,225,211,.1);color:var(--bg); border:1px solid rgba(231,225,211,.3);cursor:pointer;font-family:var(--font-stack); display:flex;align-items:center;justify-content:center; transition:background .2s ease,border-color .2s ease; } .lb-close:hover,.lb-nav:hover{background:var(--accent-deep);border-color:var(--accent-deep)} .lb-close{top:18px;right:18px;width:44px;height:44px;border-radius:50%;font-size:26px} .lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:30px} .lb-prev{left:clamp(10px,3vw,34px)} .lb-next{right:clamp(10px,3vw,34px)} .lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (max-width:600px){ .lb-nav{width:44px;height:44px;font-size:24px} .lb-img{max-height:68vh} } .portfolio-card{margin:0} .portfolio-caption{margin-top:11px} .portfolio-title{font:700 16px var(--font-stack);letter-spacing:-.01em} .portfolio-meta{ font:700 11px var(--font-stack); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; } /* ========================================================================== Home — About teaser band (on stone) ========================================================================== */ .about-teaser-section{padding:clamp(48px,7vw,72px) clamp(20px,5vw,56px)} .about-teaser-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(30px,5vw,48px); align-items:center; } .teaser-text{ font:500 clamp(22px,3vw,29px) var(--font-stack); line-height:1.34; letter-spacing:-.01em; margin:16px 0 0; text-wrap:pretty; } /* ========================================================================== Home — Mission band (on accent) ========================================================================== */ .mission-band{ position:relative; overflow:hidden; padding:clamp(60px,9vw,110px) clamp(20px,5vw,56px); text-align:center; } .mission-inner{position:relative;max-width:900px;margin:0 auto} .mission-text{ font:700 clamp(30px,5vw,46px) var(--font-stack); line-height:1.16; letter-spacing:-.025em; margin:18px 0 0; text-wrap:balance; color:var(--on-accent); } /* ========================================================================== About page ========================================================================== */ .about-hero-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(30px,5vw,50px); align-items:start; } .bio-col{max-width:520px} .bio-p{ font:400 clamp(16px,1.8vw,19px) var(--font-stack); line-height:1.6; color:var(--body-deep); margin:0 0 18px; } .bio-p:last-child{margin-bottom:0} .pull-quote-section{padding:clamp(48px,7vw,80px) clamp(20px,5vw,56px)} .pull-quote{ font:700 clamp(26px,4.2vw,42px) var(--font-stack); line-height:1.2; letter-spacing:-.02em; margin:0 0 clamp(36px,5vw,56px); max-width:20ch; text-wrap:balance; } .facts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(24px,3vw,36px); } .fact-col{border-top:2px solid var(--ink);padding-top:14px} .fact-label{ font:700 11px var(--font-stack); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-stone); margin-bottom:8px; } .fact-value{font:500 16px var(--font-stack);line-height:1.45} .clients-section{padding:clamp(48px,7vw,80px) clamp(20px,5vw,56px)} .clients-cloud{display:flex;flex-wrap:wrap;gap:14px 40px} .client-name{ font:700 clamp(20px,3vw,30px) var(--font-stack); letter-spacing:-.02em; color:var(--muted-stone); } /* ========================================================================== Contact page ========================================================================== */ .contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(32px,5vw,56px); align-items:start; } .contact-intro{ font:400 clamp(16px,1.8vw,18px) var(--font-stack); line-height:1.6; color:var(--body-deep); margin:0 0 28px; max-width:420px; } .status-row{ display:flex; align-items:center; gap:9px; font:700 12px var(--font-stack); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:26px; } .pulse-dot{ width:9px;height:9px; border-radius:50%; background:var(--accent-deep); animation:pulse 2.4s ease-in-out infinite; animation-play-state:var(--anim); display:inline-block; } .info-row{border-top:2px solid var(--ink);padding-top:16px} .info-row--spaced{margin-bottom:18px} .info-label{ font:700 11px var(--font-stack); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; } .info-label--elsewhere{margin-bottom:9px} .info-value{font:500 16px var(--font-stack)} .elsewhere-links{display:flex;gap:18px;font:500 15px var(--font-stack)} .form-card{ border:2px solid var(--ink); background:var(--bg-alt); padding:clamp(22px,3vw,32px); } .field-group{margin-bottom:18px} .field-group--message{margin-bottom:22px} .field-label{ display:block; font:700 11px var(--font-stack); letter-spacing:.12em; text-transform:uppercase; color:var(--body); margin-bottom:7px; } .field-input{ width:100%; padding:13px 14px; border:1.5px solid var(--ink); border-radius:2px; background:var(--field-bg); font:400 15px var(--font-stack); color:var(--ink); outline:none; } .field-input:focus{ border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(143,159,230,.28); /* periwinkle focus ring — update if palette changes */ } .field-textarea{ width:100%; padding:13px 14px; border:1.5px solid var(--ink); border-radius:2px; background:var(--field-bg); font:400 15px var(--font-stack); line-height:1.5; color:var(--ink); outline:none; resize:vertical; } .field-textarea:focus{ border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(143,159,230,.28); } .field-error{ font:600 12px var(--font-stack); color:var(--error); margin-top:6px; } .field-error:empty{display:none} .project-tags{display:flex;flex-wrap:wrap;gap:8px} .success-panel{text-align:center;padding:clamp(24px,4vw,44px) 8px} .success-icon{ width:52px;height:52px; margin:0 auto 20px; background:var(--accent); display:flex; align-items:center; justify-content:center; font:700 26px var(--font-stack); color:var(--on-accent); } .success-title{ font:700 clamp(22px,3vw,28px) var(--font-stack); letter-spacing:-.02em; margin-bottom:10px; } .success-text{ font:400 15px var(--font-stack); line-height:1.55; color:var(--body); margin:0 auto; max-width:320px; } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background:var(--ink); color:var(--bg); padding:clamp(52px,7vw,72px) clamp(20px,5vw,56px) 36px; } .footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:36px; } .footer-cta-col{grid-column:1 / -1;max-width:640px} .footer-eyebrow{ font:700 11px var(--font-stack); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; } .footer-cta-link{ font:700 clamp(30px,5vw,48px) var(--font-stack); line-height:1.02; letter-spacing:-.03em; cursor:pointer; display:inline-block; } .footer-cta-link:hover{color:var(--accent)} .footer-col-label{ font:700 11px var(--font-stack); letter-spacing:.14em; text-transform:uppercase; color:var(--footer-mut); margin-bottom:14px; } .footer-links{display:flex;flex-direction:column;gap:9px;font:400 15px var(--font-stack)} .footer-link{color:var(--footer-link);cursor:pointer} .footer-link:hover{color:var(--bg)} .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:48px; padding-top:20px; border-top:1px solid rgba(231,225,211,.16); font:700 11px var(--font-stack); letter-spacing:.12em; text-transform:uppercase; color:var(--footer-mut); } /* ========================================================================== Reduced motion — disables marquee, floating blocks, pulse, fadeUp ========================================================================== */ @media (prefers-reduced-motion: reduce){ .marquee-track, .float-a, .float-b, .float-c, .float-d, .pulse-dot, .page-main{ animation:none !important; } .art-card, .sec-preview, .sec-thumb, .sec-preview img, .art-item, .art-item img, .lb-close, .lb-nav{ transition:none !important; } }