/* ============================================================ FLORES TAMEZ — uber-luxury heritage Mood: 1960s, old money, racing green & brass, varnished teak, transatlantic gentleman. Quiet luxury. For the people who know. Type: tiny tracked caps · engraved serif · script accent ============================================================ */ :root{ --bg: #f3ecdd; /* aged cream / ecru paper */ --bg-2: #ebe2cf; /* deeper ecru panel */ --bg-3: #e3dac6; /* product card */ --ink: #211c14; /* warm near-black */ --ink-soft: #5b5343; /* body */ --muted: #8b8068; /* quiet labels */ --green: #203a2c; /* British racing green */ --green-dp: #182c21; --oxblood: #5e2329; --brass: #997433; /* accent */ --brass-br: #c0a061; /* light brass (on green) */ --cognac: #7c4a24; --gold-br: #8a5d22; /* script/links on cream */ --line: rgba(33,28,20,.18); --line-soft: rgba(33,28,20,.10); --maxw: 1240px; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* Lenis adds .lenis to when active — hand scrolling over to it */ html.lenis, html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } .lenis.lenis-stopped{ overflow:hidden; } body{ background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025; 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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .caps{ font-family:"Inter",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.36em; font-size:.69rem; color:var(--muted); } .script{ font-family:"Pinyon Script",cursive; font-weight:400; color:var(--gold-br); } .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.4rem,5vw,4rem); position:relative; z-index:2; } section{ position:relative; z-index:2; } .eyebrow{ display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; } .eyebrow::after{ content:""; height:1px; flex:1; background:var(--line); max-width:84px; } .eyebrow.center{ justify-content:center; } .eyebrow.center::before{ content:""; height:1px; width:84px; background:var(--line); } .title{ font-family:"Fraunces",serif; font-weight:300; font-size:clamp(2.2rem,5.2vw,3.9rem); line-height:1.05; letter-spacing:-.01em; color:var(--ink); } .title em{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; color:var(--cognac); } .title .script{ font-size:1.3em; line-height:.7; } /* ===================== NAV ===================== */ header{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s,border-color .4s; border-bottom:1px solid transparent; } header.scrolled{ background:rgba(243,236,221,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); } .topline{ text-align:center; padding:.55rem 0; border-bottom:1px solid var(--line-soft); overflow:hidden; max-height:48px; transition:max-height .4s,opacity .4s,padding .4s; } header.scrolled .topline{ max-height:0; padding:0; opacity:0; border-color:transparent; } .topline .caps{ font-size:.6rem; letter-spacing:.3em; color:var(--muted); } .nav{ display:flex; align-items:center; justify-content:space-between; padding:1.15rem 0; transition:padding .4s; } header.scrolled .nav{ padding:.8rem 0; } .brand{ display:flex; align-items:center; gap:.8rem; } .monogram{ width:38px; height:38px; flex:none; } .brand-name{ font-family:"Cormorant Garamond",serif; font-weight:600; letter-spacing:.30em; font-size:1.12rem; text-transform:uppercase; } .nav-links{ display:flex; align-items:center; gap:2.6rem; } .nav-links a{ font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-soft); transition:color .3s; } .nav-links a:hover{ color:var(--gold-br); } .nav-toggle{ display:none; background:none; border:0; color:var(--ink); cursor:pointer; } /* real logo mark */ .logo-mark{ height:36px; width:auto; display:block; transition:filter .4s; transform:translateY(-2px); } /* nudged up a hair to optically center with the wordmark */ header:not(.scrolled) .logo-mark{ filter:brightness(0) invert(1); } /* cream/white over the hero */ /* over-hero (not scrolled) text reads light */ header:not(.scrolled) .brand-name, header:not(.scrolled) .nav-links a, header:not(.scrolled) .nav-toggle, header:not(.scrolled) .topline .caps{ color:#f1ead9; } header:not(.scrolled) .nav-links a:hover{ color:#fff; } /* ===================== HERO ===================== */ .hero{ min-height:100vh; display:flex; align-items:flex-end; padding:9.5rem 0 clamp(3rem,7vw,6rem); position:relative; overflow:hidden; } .hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; z-index:0; } .hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(80deg, rgba(13,11,7,.86) 0%, rgba(13,11,7,.58) 38%, rgba(13,11,7,.15) 72%, rgba(13,11,7,0) 100%), linear-gradient(0deg, rgba(13,11,7,.6) 0%, rgba(13,11,7,0) 40%); } .hero .wrap{ position:relative; z-index:2; } .hero-inner{ max-width:760px; } .hero h1{ font-family:"Fraunces",serif; font-weight:300; font-size:clamp(2.7rem,6vw,5rem); line-height:1.02; letter-spacing:-.02em; margin:.5rem 0 1.6rem; } .hero h1 .l-italic{ display:block; font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:400; font-size:.58em; color:var(--cognac); } .hero h1 .l-serif{ display:block; font-weight:600; margin-top:-.2em; } .hero h1 .script{ font-size:1.02em; } .hero-sub{ max-width:33rem; color:var(--ink-soft); font-size:1.02rem; } .hero-cta{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; margin-top:2.4rem; } /* hero text over dark image */ .hero h1{ color:#f4eee0; } .hero h1 .l-italic{ color:#e7d9bb; } .hero h1 .script{ color:var(--brass-br); } .hero .caps{ color:var(--brass-br); } .hero-sub{ color:#ddd4c1; } .hero .link-arrow{ color:#e8ddc6; } .hero .link-arrow:hover{ color:#fff; } .hero-photo{ position:relative; aspect-ratio:4/5; border:1px solid var(--line-soft); overflow:hidden; display:flex; align-items:flex-end; justify-content:center; } .hero-photo::before{ content:""; position:absolute; inset:0; background:radial-gradient(75% 60% at 72% 22%, rgba(32,58,44,.42), transparent 55%),radial-gradient(70% 60% at 18% 88%, rgba(124,74,36,.34), transparent 60%),linear-gradient(150deg,#e7dfcd,#d9d0bb); } .hero-photo .ph-tag{ position:relative; z-index:1; margin-bottom:1.1rem; } .btn{ font-family:"Inter",sans-serif; font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; cursor:pointer; padding:1.05rem 2.1rem; border:1px solid var(--green); color:var(--bg); background:var(--green); transition:all .35s; display:inline-block; } .btn:hover{ background:var(--green-dp); border-color:var(--green-dp); } .btn-outline{ background:transparent; border:1px solid var(--ink); color:var(--ink); } .btn-outline:hover{ background:var(--ink); color:var(--bg); } .link-arrow{ font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.6rem; transition:gap .3s,color .3s; } .link-arrow:hover{ color:var(--gold-br); gap:.95rem; } /* ===================== MANIFESTO BAND ===================== */ .manifesto{ background:var(--green); color:#efe7d3; padding:clamp(4.5rem,9vw,7rem) 0; } .manifesto .caps{ color:var(--brass-br); } .manifesto p{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(1.5rem,3vw,2.35rem); line-height:1.42; max-width:46rem; margin:1.4rem auto 0; text-align:center; color:#f1ebda; } .manifesto p em{ font-style:italic; color:var(--brass-br); } .pad{ padding:clamp(5rem,11vw,9rem) 0; } .sec-head{ max-width:780px; margin-bottom:3.2rem; } .sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .sec-intro{ color:var(--ink-soft); margin-top:1.2rem; max-width:40rem; } .sec-head.center .sec-intro{ margin-left:auto; margin-right:auto; } /* ===================== PRODUCT GRIDS ===================== */ .group-label{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 2rem; padding-bottom:1rem; border-bottom:1px solid var(--line-soft); } .group-label h3{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:600; font-size:1.85rem; color:var(--ink); } .group-label p{ color:var(--muted); font-size:.82rem; max-width:25rem; } .grid{ display:grid; gap:1.7rem; } .grid-3{ grid-template-columns:repeat(3,1fr); } .pager{ display:flex; gap:.7rem; justify-content:center; margin-top:3.2rem; } .pager button{ font-family:"Inter",sans-serif; font-weight:400; font-size:.72rem; letter-spacing:.18em; color:var(--muted); background:none; border:0; border-bottom:1px solid transparent; padding:.35rem .25rem; cursor:pointer; transition:color .3s,border-color .3s; } .pager button:hover{ color:var(--ink); } .pager button.active{ color:var(--gold-br); border-bottom-color:var(--gold); } .card{ position:relative; } .ph{ position:relative; aspect-ratio:4/5; background:var(--bg-3); border:1px solid var(--line-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; overflow:hidden; transition:transform .5s,box-shadow .5s; } .card:hover .ph{ transform:translateY(-5px); box-shadow:0 18px 40px -24px rgba(33,28,20,.5); } .swatch{ width:66px; height:66px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 6px 16px -8px rgba(0,0,0,.45); } .swatch[data-tone="black"]{ background:radial-gradient(circle at 35% 30%, #3a352e, #16140f); } .swatch[data-tone="cognac"]{ background:radial-gradient(circle at 35% 30%, #a4632f, #6a3c1c); } .swatch[data-tone="teal"]{ background:radial-gradient(circle at 35% 30%, #2f7d86, #123c43); } .swatch[data-tone="burgundy"]{ background:radial-gradient(circle at 35% 30%, #8a2f3c, #4d1722); } .swatch[data-tone="marble"]{ background:conic-gradient(from 210deg, #9c6b3e, #e7d6b3, #5a3b22, #b08344, #9c6b3e); } .ph .ph-tag{ position:relative; z-index:1; } .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 32%; } .craft-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%; z-index:1; } .badge{ position:absolute; top:.9rem; left:.9rem; z-index:2; font-family:"Fraunces",serif; font-style:italic; font-size:.8rem; letter-spacing:.05em; color:var(--gold-br); border:1px solid var(--line); padding:.22rem .6rem; background:rgba(243,236,221,.72); } .ready-badge{ position:absolute; top:.9rem; right:.9rem; z-index:2; font-family:"Inter",sans-serif; font-size:.56rem; text-transform:uppercase; letter-spacing:.14em; color:#eef4ef; background:rgba(32,58,44,.88); padding:.3rem .55rem; } .ph.is-sold::after{ content:"Sold"; position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:2rem; color:#efe7d3; background:rgba(24,44,33,.62); letter-spacing:.04em; } .card-body{ padding:1.1rem .1rem 0; } .card-name{ font-family:"Fraunces",serif; font-weight:400; font-size:1.12rem; } .card-note{ color:var(--muted); font-size:.78rem; margin-top:.25rem; } .card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:1rem; } .price{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:1.3rem; color:var(--cognac); } .buy{ font-size:.68rem; text-transform:uppercase; letter-spacing:.18em; color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:3px; transition:color .3s,border-color .3s; } .buy:hover{ color:var(--gold-br); border-color:var(--gold-br); } .sold-tag{ font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; color:var(--muted); } /* ===================== PROCESS / STANDARDS (numbered + trios) ===================== */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:1rem; } .step{ border-top:1px solid var(--line); padding-top:1.2rem; } .step .num{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--cognac); font-size:1.5rem; } .step h4{ font-family:"Fraunces",serif; font-weight:400; font-size:1.12rem; margin:.5rem 0; } .step p{ color:var(--muted); font-size:.85rem; } .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; } .craft-ph{ aspect-ratio:4/5; border:1px solid var(--line-soft); position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; } .craft-ph::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 40% 30%, rgba(124,74,36,.26), transparent 55%),linear-gradient(160deg,#e5ddca,#d6cdb7); } .craft-ph .ph-tag{ position:relative; z-index:1; margin-bottom:1.1rem; } .craft-body p{ color:var(--ink-soft); margin-top:1.3rem; max-width:32rem; } .pullquote{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.35; color:var(--ink); margin:2rem 0 1.4rem; padding-left:1.3rem; border-left:2px solid var(--brass); } .sig{ font-family:"Pinyon Script",cursive; font-size:2.5rem; color:var(--gold-br); line-height:1; } .standards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:1rem; } .standards .std{ border-top:1px solid var(--line); padding-top:1.1rem; } .standards .std .caps{ color:var(--gold-br); } .standards .std h4{ font-family:"Fraunces",serif; font-weight:400; font-size:1.08rem; margin:.55rem 0 .4rem; } .standards .std p{ color:var(--muted); font-size:.83rem; } /* ===================== THE LIST ===================== */ .list{ background:var(--bg-2); border-top:1px solid var(--line-soft); } .list-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; } .list-form{ display:flex; gap:1rem; margin-top:2rem; max-width:30rem; align-items:flex-end; flex-wrap:wrap; } .field{ display:flex; flex-direction:column; gap:.5rem; flex:1; min-width:220px; } label{ font-size:.64rem; text-transform:uppercase; letter-spacing:.24em; color:var(--muted); } input{ background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--ink); font-family:"Inter",sans-serif; font-weight:300; font-size:.95rem; padding:.7rem 0; transition:border-color .3s; } input:focus{ outline:none; border-color:var(--brass); } .ok-msg{ color:var(--gold-br); font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.15rem; display:none; margin-top:1.4rem; } .err-msg{ color:var(--oxblood); font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.1rem; display:none; margin-top:1.4rem; } .err-msg a{ color:var(--oxblood); border-bottom:1px solid var(--line); } /* honeypot — off-screen, not display:none (bots skip display:none) */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .list-aside .caps{ display:block; } .list-aside a.big{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.45rem; color:var(--ink); transition:color .3s; display:block; margin-top:.4rem; } .list-aside a.big:hover{ color:var(--gold-br); } /* ===================== FOOTER ===================== */ footer{ border-top:1px solid var(--line-soft); padding:3.2rem 0; } .foot{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; } .foot-links{ display:flex; gap:1.8rem; } .foot-links a{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); transition:color .3s; } .foot-links a:hover{ color:var(--gold-br); } .foot-fine{ color:var(--muted); font-size:.72rem; letter-spacing:.04em; margin-top:1.4rem; } /* ===================== GUIDES / EDITORIAL (SEO) ===================== */ .article{ max-width:760px; margin:0 auto; padding:clamp(8rem,12vw,10rem) clamp(1.4rem,5vw,2rem) clamp(4rem,8vw,6rem); } .guide-hero{ margin-top:62px; height:clamp(220px,40vh,400px); overflow:hidden; } .guide-hero img{ width:100%; height:100%; object-fit:cover; } .has-hero .article{ padding-top:clamp(2.5rem,5vw,4rem); } .has-hero .hub{ padding-top:clamp(2.5rem,5vw,4rem); } .standards .std .std-img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; margin-bottom:1rem; border:1px solid var(--line-soft); } .crumb{ font-size:.66rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); } .crumb a{ color:var(--muted); transition:color .3s; } .crumb a:hover{ color:var(--gold-br); } .article h1{ font-family:"Fraunces",serif; font-weight:300; font-size:clamp(2.2rem,5vw,3.3rem); line-height:1.08; letter-spacing:-.01em; margin:1rem 0 .9rem; } .article .lede{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:clamp(1.3rem,2.4vw,1.6rem); color:var(--ink-soft); line-height:1.42; } .article h2{ font-family:"Fraunces",serif; font-weight:400; font-size:1.45rem; margin:2.6rem 0 .7rem; } .article p{ color:var(--ink-soft); margin:1rem 0; } .article ul{ color:var(--ink-soft); margin:1rem 0 1rem 1.1rem; } .article li{ margin:.5rem 0; } .article a.inline{ color:var(--gold-br); border-bottom:1px solid var(--line); } .article a.inline:hover{ color:var(--ink); } .workshop-block{ border:1px solid var(--line); padding:1.6rem; margin:2.4rem 0; display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; justify-content:space-between; background:var(--bg-2); } .workshop-block h3{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:600; font-size:1.4rem; } .workshop-block p{ font-size:.85rem; color:var(--muted); margin:.4rem 0 0; max-width:28rem; } .related-guides{ margin-top:3rem; border-top:1px solid var(--line-soft); padding-top:1rem; } .related-guides a{ display:block; padding:.75rem 0; border-bottom:1px solid var(--line-soft); color:var(--ink); font-family:"Fraunces",serif; transition:color .3s; } .related-guides a:hover{ color:var(--gold-br); } .cta-band{ text-align:center; background:var(--green); color:#efe7d3; padding:clamp(3rem,6vw,4.5rem) 1.5rem; margin-top:clamp(3rem,6vw,5rem); } .cta-band h2{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:clamp(1.6rem,3vw,2.2rem); color:#f1ebda; margin:0 auto 1.4rem; max-width:30rem; } .hub{ max-width:var(--maxw); margin:0 auto; padding:clamp(8rem,12vw,10rem) clamp(1.4rem,5vw,4rem) clamp(4rem,8vw,6rem); } .hub-head{ max-width:640px; margin:0 auto 3rem; text-align:center; } .guide-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; } .guide-list a{ display:block; border:1px solid var(--line-soft); padding:1.6rem; transition:border-color .3s, transform .4s; } .guide-list a:hover{ border-color:var(--line); transform:translateY(-3px); } .guide-list .gl-cat{ font-size:.62rem; text-transform:uppercase; letter-spacing:.24em; color:var(--brass); } .guide-list h3{ font-family:"Fraunces",serif; font-weight:400; font-size:1.2rem; margin:.5rem 0 .4rem; } .guide-list p{ color:var(--muted); font-size:.82rem; } @media(max-width:680px){ .guide-list{ grid-template-columns:1fr; } } /* ===================== SCROLL REVEAL ===================== */ /* Default: fully visible — content is never hidden unless we KNOW motion is welcome. */ .reveal{ opacity:1; transform:none; } @media (prefers-reduced-motion: no-preference){ .reveal{ opacity:0; transform:translateY(24px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); } .reveal.in{ opacity:1; transform:none; } /* stagger children of a revealed container (grids, step rows, etc.) */ .grid .reveal.in:nth-child(2){ transition-delay:.08s; } .grid .reveal.in:nth-child(3){ transition-delay:.16s; } .grid .reveal.in:nth-child(4){ transition-delay:.24s; } .grid .reveal.in:nth-child(5){ transition-delay:.32s; } .grid .reveal.in:nth-child(6){ transition-delay:.40s; } .steps .reveal.in:nth-child(2){ transition-delay:.08s; } .steps .reveal.in:nth-child(3){ transition-delay:.16s; } .steps .reveal.in:nth-child(4){ transition-delay:.24s; } .standards .reveal.in:nth-child(2){ transition-delay:.10s; } .standards .reveal.in:nth-child(3){ transition-delay:.20s; } } /* ===================== CROSS-DOCUMENT VIEW TRANSITIONS ===================== */ /* Morphs the collection card image into the PDP hero on navigation. Degrades silently. */ @view-transition{ navigation:auto; } @media (prefers-reduced-motion: no-preference){ ::view-transition-group(ftpdphero){ animation-duration:.55s; animation-timing-function:cubic-bezier(.16,1,.3,1); } } /* ===================== NUMBERED EDITION (One of One PDP) ===================== */ .edition{ margin:1.9rem 0 0; padding:1.6rem 0 .2rem; border-top:1px solid var(--line-soft); } .edition-mark{ font-family:"Fraunces",serif; font-weight:300; font-style:italic; font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1; color:var(--ink); letter-spacing:-.01em; } .edition-rule{ height:1px; width:64px; background:var(--brass); margin:1rem 0; } .edition-script{ font-family:"Pinyon Script",cursive; font-size:1.6rem; line-height:1.1; color:var(--gold-br); } @media(max-width:900px){ .hero-grid,.split,.list-grid{ grid-template-columns:1fr; } .hero-photo{ max-width:420px; order:-1; } .grid-3{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:repeat(2,1fr); } .craft-ph{ max-width:480px; } .nav-links{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--bg-2); flex-direction:column; align-items:flex-start; justify-content:center; gap:2rem; padding:3rem; transform:translateX(100%); transition:transform .4s; border-left:1px solid var(--line); } .nav-links.open{ transform:none; } .nav-links a{ font-size:1rem; color:var(--ink); } header:not(.scrolled) .nav-links.open a{ color:var(--ink); } .nav-toggle{ display:block; z-index:60; } } @media(max-width:560px){ .grid-3,.steps,.standards{ grid-template-columns:1fr; } .group-label{ flex-direction:column; } } @media(prefers-reduced-motion:reduce){ *{ animation:none!important; scroll-behavior:auto!important; } .reveal{ opacity:1!important; transform:none!important; transition:none!important; } @view-transition{ navigation:none; } }