/* KOLLAZ phase 1 shared stylesheet. One file, template driven: every design change the Council directs lands here or in the builder template, once. System: 8pt spacing grid, dark emerald + gold frame, light reading sheet, gold is the single accent (primary action, selection, key labels). */ :root{ --bg:#08120e; --bg2:#0c1a14; --surface:#10221a; --surface2:#152b20; --ink:#f2e9d5; --ink-dim:#c9bfa5; --muted:#9db3a5; --gold:#d9a92f; --gold-bright:#f0c75e; --gold-ink:#1a1405; --paper:#fffdf8; --paper2:#f7f2e7; --body:#1d2420; --body-dim:#45514a; --line:rgba(217,169,47,.28); --line-soft:rgba(242,233,213,.14); --radius:16px; --label:#856210; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--body);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:1.0625rem;line-height:1.65;background:#e9e2cf} .wrap{max-width:1120px;margin:0 auto;padding-left:16px;padding-right:16px} img{max-width:100%;height:auto;display:block} a{color:#0e6b4a} :focus-visible{outline:3px solid var(--gold);outline-offset:2px} /* header: sticky, compact, never traps content; full-bleed emerald gradient continues behind the wordmark (no flat band, standing law) */ .site-header{position:sticky;top:0;z-index:50; background:radial-gradient(420px 160px at 18% 0%,rgba(240,199,94,.20),transparent 65%), linear-gradient(120deg,#08120e,#0e3d2c 70%,#08120e); border-bottom:1px solid var(--line)} .header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px} .brand{display:flex;align-items:center;min-height:48px} /* Beige glow behind the wordmark removed by owner order 2026-10-28: the reversed wordmark stands alone on the header gradient. Wrapper and padding stay, so header layout and heights are unchanged. */ .brand-glow{display:inline-block;padding:8px 28px} /* Wordmark enlarged 50 percent by owner order 2026-10-30 (148px desktop, 80px phone: too small on his device). Aspect is intrinsic (width only). */ .brand-glow img{width:222px} .main-nav{display:flex;gap:8px;flex-wrap:wrap} .main-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:0.9375rem; padding:12px 16px;min-height:48px;display:inline-flex;align-items:center;border-radius:999px} .main-nav a:hover{background:var(--surface2);color:var(--gold-bright)} .main-nav{margin-left:auto} /* burger menu: zero-JS details/summary inside the sticky header, so it is reachable at any scroll position on every page. The panel is an overlay: it never pushes content or changes the header height. Identical component ships in the calculator stylesheet. Panel contrast, measured 2026-10-28: links --ink on the panel gradient stops: 10.10:1 (#0e3d2c) to 15.77:1 (#08120e); group heading --gold: 5.61:1 worst stop; foot links --ink-dim: 6.66:1 worst stop. Shop link --gold-bright (commercial intent, second in the panel by owner directive 2026-10-28): 7.57:1 (#0e3d2c) to 11.82:1 (#08120e). All pass the 4.5:1 floor. */ .menu{position:relative;flex:none} .menu-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px; min-height:48px;padding:12px 16px;border:1px solid var(--line);border-radius:999px;line-height:1.2; color:var(--ink);font-weight:700;font-size:0.9375rem;background:rgba(8,18,14,.35)} .menu-btn::-webkit-details-marker{display:none} /* Designed tap and focus states (owner phone review 2026-10-28): the toggle previously had none, so Android showed its default blue tap highlight (a full-height rectangle ignoring the pill shape) and no pressed state existed. The highlight is killed, pointer focus drops the default outline, keyboard focus gets a gold ring drawn as a box-shadow so it follows the pill radius in every engine, and the pressed and open states deepen the pill and add a soft gold glow. Box-shadow only: zero layout shift, header heights unchanged. */ .menu-btn{-webkit-tap-highlight-color:transparent} .menu-btn:hover{color:var(--gold-bright);border-color:var(--gold)} .menu-btn:focus:not(:focus-visible){outline:none} .menu-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)} .menu-btn:active{background:var(--surface2);color:var(--gold-bright); box-shadow:0 0 18px rgba(217,169,47,.45),inset 0 0 0 1px rgba(217,169,47,.55)} .menu[open ] .menu-btn{background:var(--surface2);color:var(--gold-bright); box-shadow:0 0 18px rgba(217,169,47,.45),inset 0 0 0 1px rgba(217,169,47,.55)} .menu-bars{display:inline-flex;flex-direction:column;gap:4px} .menu-bars span{display:block;width:20px;height:2px;border-radius:2px;background:var(--gold)} .menu[open ] .menu-bars span{background:var(--gold-bright)} .menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60; width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 96px);overflow-y:auto; background:linear-gradient(160deg,#0e3d2c,#08120e);border:1px solid var(--line); border-radius:12px;box-shadow:0 24px 48px -16px rgba(0,0,0,.6);padding:8px} .menu-panel a{display:flex;align-items:center;min-height:48px;padding:10px 16px;border-radius:8px; color:var(--ink);text-decoration:none;font-weight:600} .menu-panel a:hover{background:var(--surface2);color:var(--gold-bright)} .menu-panel a.menu-shop{color:var(--gold-bright)} .menu-panel a.menu-sub{padding-left:32px;font-weight:500;font-size:0.9375rem;min-height:48px} /* FIXWAVE2 2026-10-30: 44px to the 48px house floor */ .menu-group{margin:12px 16px 4px;font-size:0.8125rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--gold)} .menu-foot{border-top:1px solid var(--line-soft);margin-top:8px;padding-top:8px} .menu-foot a{min-height:48px;font-size:0.875rem;font-weight:500;color:var(--ink-dim)} /* FIXWAVE2 2026-10-30: 40px to the 48px house floor */ .menu-foot a:hover{color:var(--gold-bright)} @media (max-width:560px){.menu-btn{padding:12px 14px}} /* At phone widths the inline links yield to the menu: brand, four links and the menu button cannot share a 390px row without crushing the wordmark (found in render inspection 2026-10-28). The menu carries every one of those destinations, so nothing is lost; inline links return at 641px. */ @media (max-width:640px){.main-nav{display:none}} @media (max-width:560px){ .header-in{min-height:56px;gap:8px;padding-left:12px;padding-right:12px} .brand-glow{padding:4px 12px} .brand-glow img{width:120px} .main-nav{gap:0;flex-wrap:nowrap} .main-nav a{padding:12px 6px;font-size:0.8125rem} } /* reading sheet */ .sheet{background:var(--paper);border-radius:var(--radius);margin-top:24px;margin-bottom:32px; padding:32px 40px 40px;box-shadow:0 24px 48px -24px rgba(0,0,0,.45)} article.sheet{max-width:800px} @media (max-width:560px){.sheet{padding:24px 16px 32px;border-radius:12px}} h1{font-size:clamp(1.875rem,5.2vw,2.75rem);line-height:1.12;letter-spacing:-.01em;margin:8px 0 8px;color:var(--body)} h2{font-size:clamp(1.4375rem,3.6vw,1.8125rem);line-height:1.2;margin:32px 0 8px} h3{font-size:1.25rem;line-height:1.3;margin:24px 0 8px} p{margin:0 0 16px} ul,ol{margin:0 0 16px;padding-left:24px} li{margin-bottom:8px} table{border-collapse:collapse;width:100%;margin:16px 0;font-size:0.9375rem;display:block;overflow-x:auto} th,td{border:1px solid #ddd3ba;padding:8px;text-align:left} th{background:var(--paper2)} blockquote{border-left:4px solid var(--gold);margin:16px 0;padding:8px 16px;background:var(--paper2)} hr{border:none;border-top:1px solid #ddd3ba;margin:24px 0} .kicker{margin:0;font-size:0.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .kicker a{color:var(--label);text-decoration:none;display:inline-block;min-height:48px;line-height:48px;padding:0 6px;margin:-14px -6px} /* FIXWAVE2 2026-10-30 (A7): the eyebrow link gains a 48px target via line-height and padding; the negative margins hold its visual placement and the kicker line's flow height */ .byline{color:var(--body-dim);font-size:0.875rem;margin-bottom:16px} .hero{margin:0 0 24px} .hero img{border-radius:12px;width:100%} .answer-box,.toc{background:var(--paper2);border:1px solid #e3d9bd;border-radius:12px;padding:16px 24px;margin:0 0 24px} .answer-box{border-left:6px solid var(--gold)} .box-label{font-size:0.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin:0 0 8px} .toc ol{margin:0} .toc a{text-decoration:none;display:flex;align-items:center;min-height:48px} /* FIXWAVE2 2026-10-30: TOC links gain a 48px touch target; flex alignment keeps the list tidy */ .toc a:hover{text-decoration:underline} /* bands and next card: one filled primary per band, targets >=48px */ .tool-band,.cta-band{border-radius:12px;padding:24px;margin:32px 0;color:var(--ink)} .tool-band{background:linear-gradient(130deg,#0e3d2c,#10221a)} .cta-band{background:linear-gradient(130deg,#152b20,#0e3d2c);border:1px solid var(--line)} .tool-band h2,.cta-band h2{color:var(--gold-bright);margin-top:0} .btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;border-radius:999px; font-weight:700;font-size:1rem;text-decoration:none;border:1px solid transparent} .btn-gold{background:var(--gold);color:var(--gold-ink)} .btn-gold:hover{background:var(--gold-bright)} .btn-ghost{border-color:var(--line);color:var(--ink)} /* Designed states for every .btn (owner order 2026-10-30): the menu button's state language, applied site-wide. Tap highlight killed, pointer focus drops the default outline, keyboard focus gets the gold ring as a box-shadow so it follows the pill radius, and the pressed state deepens with the menu button's soft gold glow. Every .btn on the site sits on a dark surface (hero, CTA band, tool band, consent card), so the focus ring offset is --bg throughout. */ .btn{-webkit-tap-highlight-color:transparent; transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease} .btn:focus:not(:focus-visible){outline:none} .btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)} .btn:active{box-shadow:0 0 18px rgba(217,169,47,.45),inset 0 0 0 1px rgba(217,169,47,.55)} .btn-gold:active{background:#bd8f22} .btn-ghost:hover{color:var(--gold-bright);border-color:var(--gold)} .btn-ghost:active{background:var(--surface2);color:var(--gold-bright)} .next-card{display:block;text-decoration:none;background:var(--paper2);border:2px solid var(--gold); border-radius:12px;padding:24px;margin:32px 0 8px;color:var(--body)} .next-card:hover{background:#f1e8d2} .next-label{display:block;font-size:0.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label)} .next-title{display:block;font-size:1.5rem;font-weight:700;line-height:1.25;margin:8px 0} .next-desc{display:block;color:var(--body-dim)} /* homepage */ .home-hero{color:var(--ink);padding:48px 0 48px;text-align:center; background:radial-gradient(700px 320px at 50% -60px,rgba(240,199,94,.22),transparent 65%), linear-gradient(160deg,#0e3d2c,#08120e 75%)} .entity{color:var(--gold-bright);font-weight:600;letter-spacing:.04em;margin-top:16px} .home-h1{color:var(--ink);font-size:clamp(2.125rem,6vw,3.5rem);max-width:16em;margin-left:auto;margin-right:auto} .lede{font-size:1.1875rem;max-width:38em} .lede.light{color:var(--ink-dim);margin-left:auto;margin-right:auto} .front-paths{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:24px} .section{padding:8px 16px 32px} .section>h2{color:var(--body)} .doors{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} @media (max-width:640px){.doors{grid-template-columns:1fr}} .door{display:block;background:var(--paper);border-radius:12px;padding:24px;text-decoration:none;color:var(--body); border-top:6px solid var(--gold);box-shadow:0 16px 32px -18px rgba(0,0,0,.4)} .door-title{display:block;font-size:1.375rem;font-weight:700} .door-desc{display:block;color:var(--body-dim);margin-top:8px} .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} @media (max-width:640px){.cards{grid-template-columns:1fr}} /* featured row: exactly three across on desktop, stacked on phone */ .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:900px){.cards-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.cards-3{grid-template-columns:1fr}} /* slim all-guides band that replaced the homepage Top 10 grid */ .guides-band{background:var(--paper);border-top:6px solid var(--gold);border-radius:12px; padding:24px 32px;display:flex;align-items:center;gap:16px 32px;flex-wrap:wrap; box-shadow:0 16px 32px -18px rgba(0,0,0,.4)} .guides-band p{margin:0;flex:1 1 320px;font-size:1.125rem} /* all-guides page: room jump list wraps vertically, never scrolls sideways */ .room-jump{list-style:none;display:flex;flex-wrap:wrap;gap:0 32px;margin:0 0 8px;padding:0} .room-jump li{margin:0} .room-jump a{display:inline-flex;align-items:center;min-height:48px;font-weight:600} .room-group{margin-top:40px} .room-group>h2{margin-top:0} .card{background:var(--paper);border-radius:12px;overflow:hidden;box-shadow:0 16px 32px -18px rgba(0,0,0,.35)} .card a{text-decoration:none;color:var(--body);display:block} .card img{width:100%;aspect-ratio:3/2;object-fit:cover} .card-body{display:block;padding:16px 24px 24px} .card-cat{display:block;font-size:0.78125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--label)} .card-title{display:block;font-size:1.25rem;font-weight:700;line-height:1.3;margin:8px 0} .card-desc{display:block;color:var(--body-dim);font-size:0.96875rem} /* Card states (owner order 2026-10-30): subtle, with a tiny bit of movement. Hover lifts the card 3px, deepens its shadow and warms the edge gold; the press settles it back to 1px; keyboard focus lifts it the same way and draws the gold ring on the card itself, so the whole chip answers, not just its link. Reduced-motion readers keep the colour and shadow changes and lose only the movement. */ .card{transition:transform .18s ease,box-shadow .18s ease} .card a{-webkit-tap-highlight-color:transparent} .card a:focus-visible{outline:none} .card:hover{transform:translateY(-3px); box-shadow:0 22px 38px -16px rgba(0,0,0,.42),0 0 0 1px rgba(217,169,47,.35)} .card:hover .card-title{color:#0e6b4a} .card:active{transform:translateY(-1px); box-shadow:0 12px 24px -14px rgba(0,0,0,.40),0 0 0 1px rgba(217,169,47,.35)} .card:focus-within{transform:translateY(-3px); box-shadow:0 22px 38px -16px rgba(0,0,0,.42),0 0 0 2px var(--gold)} @media (prefers-reduced-motion:reduce){ .card{transition:none} .card:hover,.card:active,.card:focus-within{transform:none} } .etsy-band{background:linear-gradient(130deg,#0e3d2c,#08120e);color:var(--ink);border-radius:12px;padding:32px} .etsy-band h2{color:var(--gold-bright);margin-top:0} /* footer: full-bleed emerald gradient to the edge, legal links always present */ .site-footer{margin-top:16px;color:var(--ink-dim); background:radial-gradient(500px 200px at 80% 0%,rgba(240,199,94,.14),transparent 60%), linear-gradient(140deg,#0e3d2c,#08120e 65%)} .foot-in{padding-top:32px;padding-bottom:40px} .foot-brand{color:var(--ink);font-weight:600} .site-footer nav{display:flex;gap:8px 24px;flex-wrap:wrap;margin:16px 0} .site-footer nav a{color:var(--gold-bright);text-decoration:none;min-height:48px;display:inline-flex;align-items:center} .foot-note{font-size:0.84375rem;color:var(--muted)} /* consent banner (go-live analytics, 2026-10-28): first-party, fixed at the bottom so it never covers the top of an article (answer box and CTA band sit high; the page gains matching bottom padding from the banner script while it is visible). Full-width sheet on phone, bottom-left card on desktop. Fixed position: zero layout shift. Targets stay >=48px. */ .consent{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:12px} .consent[hidden]{display:none} .consent-card{background:linear-gradient(150deg,#0e3d2c,#08120e);color:var(--ink); border:1px solid var(--line);border-radius:12px;padding:20px 24px; box-shadow:0 24px 48px -16px rgba(0,0,0,.65)} .consent-card h2{color:var(--gold-bright);font-size:1.1875rem;margin:0 0 8px;line-height:1.25} .consent-card p{margin:0 0 8px;font-size:0.96875rem;color:var(--ink)} .consent-btns{display:flex;gap:16px 12px;flex-wrap:wrap;align-items:center;margin-top:16px} /* the Decline control is a real