/* ========================================================================== Northnavia — main stylesheet Design system from the owner's drafts. Written as tokens + classes rather than the drafts' inline styles, so there is one source of truth. ========================================================================== */ @font-face{font-family:'Montas';src:url('../fonts/Montas-Regular.woff2') format('woff2'),url('../fonts/Montas-Regular.woff') format('woff'),url('../fonts/Montas-Regular.otf') format('opentype');font-weight:400 700;font-style:normal;font-display:swap;} @font-face{font-family:'Satoshi';src:url('../fonts/Satoshi-Variable.woff2') format('woff2-variations'),url('../fonts/Satoshi-Variable.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap;} @font-face{font-family:'Satoshi';src:url('../fonts/Satoshi-VariableItalic.woff2') format('woff2-variations');font-weight:300 900;font-style:italic;font-display:swap;} :root{ --green:#244940; --green-dark:#1A352E; --green-mid:#34584F; --cream:#EDECE7; --sage:#A5A792; --sage-warm:#8F9285; --gold:#C4996D; --gold-dark:#A9835C; --gold-light:#CDBAA0; --white:#FFFFFF; --off-white:#F4F2EE; --border:#D9D7CE; --text:#333333; --text-strong:#1C1C1C; --muted:#6B6B66; --ok:#2F7D5F; --warn:#B4741F; --err:#A33A2B; --font-display:'Montas',Georgia,'Times New Roman',serif; --font-body:'Satoshi','Helvetica Neue',Arial,sans-serif; --maxw:1400px; --gutter:48px; --section-y:72px; --radius:0; --shadow:0 1px 3px rgba(26,53,46,.08); --tr:.18s ease; } /* Breakpoints are a build decision (the drafts carry none): <=1200 tighten gutters · <=1024 drawer nav · <=760 single column · <=480 compact */ @media (max-width:1200px){ :root{ --gutter:32px; --section-y:56px; } } @media (max-width:760px){ :root{ --gutter:20px; --section-y:44px; } } @media (max-width:480px){ :root{ --gutter:16px; --section-y:36px; } } *,*::before,*::after{box-sizing:border-box;} /* `clip`, not `hidden`: overflow-x:hidden turns into a scroll container, which stops position:sticky working anywhere inside it. `clip` clips without that side effect; `hidden` stays first as a fallback for old engines. */ html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;} /* Sticky footer: #main absorbs the slack so the green always reaches the bottom of the viewport and no white canvas is left under it on a short page. */ body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text);background:var(--white); min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;} #main{flex:1 0 auto;min-width:0;} img{max-width:100%;height:auto;display:block;} a{color:var(--green);} ::selection{background:var(--gold);color:var(--white);} h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.15;color:var(--green);margin:0 0 .5em;} h1{font-size:clamp(28px,4.2vw,52px);} h2{font-size:clamp(23px,2.6vw,36px);} h3{font-size:clamp(18px,1.6vw,22px);} p{margin:0 0 1em;} :where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:2px;} /* Hidden by clipping, NOT by left:-9999px — an off-screen-left box overflows the document horizontally, which is what forced overflow-x:hidden onto . */ .skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;} .skip-link:focus{left:8px;top:8px;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;z-index:200;background:var(--white);padding:10px 16px;} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;} /* The single alignment contract: header, footer and every page container share this box, so their left and right edges line up at any viewport width. ⚠ A class used ON THE SAME ELEMENT as .wrap must set padding-top/-bottom as LONGHAND. The `padding` shorthand resets padding-left/right to 0 and pushes that block's content out to the 1400px edge while the header stays inset. */ .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);width:100%;} .section{padding-top:var(--section-y);padding-bottom:var(--section-y);} .stack>*+*{margin-top:16px;} /* ---- Buttons ---- */ .btn{display:inline-block;padding:15px 32px;font-size:15px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background var(--tr),color var(--tr);border-radius:var(--radius);} .btn--primary{background:var(--green);color:var(--white);} .btn--primary:hover{background:var(--green-dark);} .btn--light{background:var(--cream);color:var(--green);} .btn--light:hover{background:var(--white);} .btn--ghost{background:transparent;color:var(--green);border-color:var(--green);} .btn--ghost:hover{background:var(--green);color:var(--white);} .btn--block{display:block;width:100%;text-align:center;} .link-underline{color:var(--green);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;} /* ---- Header ---- */ .topbar{background:var(--green);color:var(--cream);font-size:13px;flex:0 0 auto;} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap;} .topbar a{color:var(--cream);text-decoration:none;} /* No border-bottom: the drafts have no rule under the header. */ .site-header{background:var(--white);position:relative;z-index:50;flex:0 0 auto;} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:20px;padding-bottom:20px;} .site-logo img{height:38px;width:auto;} .nav{display:flex;gap:32px;flex-wrap:wrap;} .nav a{color:var(--green);font-size:15px;font-weight:500;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:border-color var(--tr);} .nav a:hover,.nav a[aria-current]{border-bottom-color:var(--gold);} .header-tools{display:flex;gap:24px;font-size:14px;align-items:center;} .header-tools a{color:var(--green);text-decoration:none;display:inline-flex;align-items:center;gap:6px;} .cart-count{background:var(--green);color:var(--white);border-radius:999px;font-size:12px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;} .nav-toggle{display:none;background:none;border:1px solid var(--border);padding:9px 12px;color:var(--green);font:inherit;font-size:14px;align-items:center;gap:8px;} @media (max-width:1024px){ .nav{display:none;} .nav-toggle{display:inline-flex;} .site-header .wrap{gap:12px;} .drawer[open] .nav{display:flex;flex-direction:column;gap:0;} } @media (max-width:600px){ .topbar .wrap{justify-content:center;text-align:center;font-size:12px;} .topbar .topbar__phone{display:none;} .site-logo img{height:30px;} .header-tools{gap:16px;} .header-tools .label{display:none;} } /* ---- Mobile drawer ---- */ .drawer{position:fixed;inset:0;background:var(--white);z-index:100;padding:0;display:none;overflow-y:auto;} .drawer.is-open{display:block;} .drawer__head{display:flex;justify-content:space-between;align-items:center;padding:20px var(--gutter);border-bottom:1px solid var(--border);} .drawer__close{background:none;border:none;font-size:26px;line-height:1;color:var(--green);cursor:pointer;padding:4px 8px;} .drawer nav{display:flex;flex-direction:column;padding:8px var(--gutter) 40px;} .drawer nav a{padding:15px 0;border-bottom:1px solid var(--border);color:var(--green);text-decoration:none;font-size:17px;} body.drawer-open{overflow:hidden;} /* ---- Hero ---- */ .hero{position:relative;min-height:660px;display:flex;align-items:center;background-color:var(--sage-warm);background-size:cover;background-position:center;overflow:hidden;} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,32,28,.82) 0%,rgba(20,32,28,.5) 42%,rgba(20,32,28,.08) 68%,rgba(20,32,28,0) 85%);} .hero .wrap{position:relative;z-index:1;padding-top:72px;padding-bottom:72px;} .hero__inner{max-width:520px;} .hero h1{color:var(--white);margin-bottom:20px;} .hero p{color:var(--cream);max-width:440px;margin-bottom:32px;} .hero__actions{display:flex;gap:16px;flex-wrap:wrap;} @media (max-width:760px){ .hero{min-height:440px;} .hero::after{background:linear-gradient(180deg,rgba(20,32,28,.55) 0%,rgba(20,32,28,.8) 100%);} .hero__inner{max-width:none;} .hero__actions .btn{flex:1 1 100%;text-align:center;} } /* ---- Grids ---- */ .grid{display:grid;gap:28px;} .grid--4{grid-template-columns:repeat(4,1fr);} .grid--3{grid-template-columns:repeat(3,1fr);} .grid--2{grid-template-columns:repeat(2,1fr);} @media (max-width:1100px){ .grid--4{grid-template-columns:repeat(3,1fr);} } @media (max-width:860px){ .grid--4,.grid--3{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .grid--4,.grid--3,.grid--2{grid-template-columns:repeat(2,1fr);gap:16px;} } @media (max-width:380px){ .grid--4,.grid--3{grid-template-columns:1fr;} } /* ---- Category tiles ---- */ /* ---- Product card ---- */ .stock{font-size:13px;display:inline-flex;align-items:center;gap:7px;} .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;} .dot--warn{background:var(--warn);} .dot--off{background:var(--sage);} /* ---- Product page ---- */ /* ---- Category / archive ---- */ .breadcrumb{font-size:13px;color:var(--sage);margin-bottom:0;padding-top:20px;} .breadcrumb a{color:var(--sage);text-decoration:none;} .breadcrumb a:hover{color:var(--green);} .breadcrumb__here{color:var(--text);} /* ---- Editorial / prose ---- */ .prose{max-width:760px;} .prose h2{margin-top:1.6em;} .prose img{margin:1.5em 0;} .prose ul,.prose ol{padding-left:1.2em;} .prose li{margin-bottom:.5em;} .prose blockquote{border-left:3px solid var(--gold);margin:1.5em 0;padding:.2em 0 .2em 1.2em;color:var(--muted);font-style:italic;} .prose table{width:100%;border-collapse:collapse;margin:1.5em 0;} .prose th,.prose td{border:1px solid var(--border);padding:10px 12px;text-align:left;font-size:15px;} .prose th{background:var(--off-white);} /* Blog card — the drafts' anatomy: 4/3 media, gold uppercase category, Montas title, sage read-time. */ .post-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;background:none;height:100%;} .post-card__media{display:block;aspect-ratio:4/3;background:var(--cream);overflow:hidden;} .post-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;} .post-card:hover .post-card__media img{transform:scale(1.03);} .post-card__tag{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;} .post-card__title{font-family:var(--font-display);font-size:18px;color:var(--green);font-weight:500;margin:0;line-height:1.35;} .post-card__title a{color:inherit;text-decoration:none;} .post-card__title a:hover{color:var(--gold-dark);} .post-card__excerpt{font-size:13px;color:var(--text);margin:0;} .post-card__read{font-size:13px;color:var(--sage);margin-top:auto;} .meta{font-size:13px;color:var(--muted);} /* ---- Footer ---- */ /* Matched to the footer shared by 8 of the 10 drafts (see Product Page.dc.html): green field, oversized brand mark bleeding off the right at 8%, four flex columns with SAGE headings, an outlined withdrawal button, and a bottom bar carrying the group attribution beside the copyright. */ .site-footer{background:var(--green);color:var(--cream);position:relative;overflow:hidden;flex:0 0 auto;} .site-footer a{color:var(--cream);text-decoration:none;} .site-footer a:hover{color:var(--white);text-decoration:underline;} /* Decorative watermark. Sized in px to match the draft, pinned to the right edge and clipped by the footer's overflow:hidden. */ .site-footer__mark{position:absolute;right:-100px;top:48px;height:480px;width:auto;max-width:none; opacity:.08;pointer-events:none;user-select:none;z-index:0;} .footer-grid{display:flex;flex-wrap:wrap;gap:56px;padding-top:64px;padding-bottom:32px;position:relative;z-index:1;} .footer-grid > *{flex:1 1 160px;min-width:0;} .footer-grid > .footer-about{flex:1 1 200px;} .footer-grid h4{color:var(--sage);font-family:var(--font-body);font-size:13px;font-weight:400; letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;} .footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .footer-grid li{margin:0;font-size:14px;line-height:1.35;} .footer-logo img{height:38px;width:auto;margin-bottom:16px;} .footer-about__where{font-size:13px;color:var(--sage);max-width:220px;margin:0 0 12px;} .footer-about__contact{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--cream);} /* Outlined statutory-withdrawal button. */ .footer-withdraw{display:inline-block;width:fit-content;margin-top:14px; border:2px solid var(--cream);color:var(--cream);padding:9px 16px;font-size:13px;text-decoration:none; transition:background var(--tr),color var(--tr);} .footer-withdraw:hover{background:var(--cream);color:var(--green);text-decoration:none;} .footer-bottom{border-top:2px solid var(--green-mid);padding-top:24px;padding-bottom:24px; display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; font-size:12px;color:var(--sage);position:relative;z-index:1;} .footer-bottom__left{display:flex;align-items:center;gap:20px;flex-wrap:wrap;} .footer-bottom__sep{width:1px;height:14px;background:var(--green-mid);flex:none;} .footer-bottom__group{display:flex;align-items:center;gap:8px;} .footer-bottom__group img{height:14px;width:auto;opacity:.85;display:block;} /* "Osa Nordhauser grupist" links to the group site. Inherits the footer's muted sage so it reads as a credit line, not a call to action; the underline only appears on hover. On the main footer the whole group — wording and mark — is one target. */ .footer-group-link{color:inherit;text-decoration:none;} .footer-group-link:hover,.footer-group-link:focus-visible{color:var(--cream);text-decoration:underline;} .footer-group-link:hover img{opacity:1;} .footer-pay{height:16px;width:auto;display:block;opacity:.7;} @media (max-width:900px){ .footer-grid{gap:40px;} .site-footer__mark{height:360px;right:-120px;} } @media (max-width:520px){ .footer-grid{gap:28px;padding-top:44px;padding-bottom:28px;} .footer-grid > *,.footer-grid > .footer-about{flex:1 1 100%;} .site-footer__mark{height:260px;right:-90px;top:24px;opacity:.06;} .footer-bottom{padding-top:20px;padding-bottom:20px;} .footer-bottom__left{gap:10px;} .footer-bottom__sep{display:none;} } /* ---- Notices / misc ---- */ .notice{border-left:3px solid var(--gold);background:var(--off-white);padding:14px 18px;margin:0 0 20px;} /* ========================================================================== CART + CHECKOUT — follows the Cart / Checkout drafts ========================================================================== */ /* ========================================================================== CART — matched to "Northnavia Cart Page.dc.html" Item rows separated by 2px cream rules, a cream summary card with the coupon at the top, and a cross-sell row carrying its own add-to-cart buttons. ========================================================================== */ /* WooCommerce shortcode pages get the full container (see page.php). */ .page-wide{padding-top:32px;padding-bottom:96px;} .page-title{font-family:var(--font-display);font-size:clamp(26px,3vw,34px);font-weight:500;color:var(--green);margin:0 0 36px;} /* align-items MUST stay stretch: with flex-start the