/* Fonts loaded via tags in each page's — no @import needed here, since this is a real static site with full control over , unlike the WordPress Custom HTML block setup this design system originally came from. */ :root{ --paper:#F6F1E8; --paper-2:#EFE5D5; --paper-line:rgba(31,35,39,.14); --text:#1F2327; --text-soft:rgba(31,35,39,.68); --green:#304238; --green-deep:#223128; --gold:#B9784C; --gold-deep:#8D5A38; --dusk:#26231F; --dusk-line:#4A4038; --dusk-text:#F3EEE2; --white:#FFFFFF; --font-display:'Cormorant Garamond', serif; --font-body:'Inter', sans-serif; --font-mono:'Inter', sans-serif; --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem; --space-6:5.5rem; --radius:16px; --radius-lg:26px; --radius-sm:12px; --max:1200px; --shadow:0 18px 40px rgba(38,35,31,.1); /* Stone-dust grain — a barely-visible texture so flat colour fields read as material, not wallpaper. Reused as a background-image across paper/dusk surfaces via background-blend-mode rather than a separate overlay element. */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:.001ms!important;} } body{font-family:var(--font-body) !important;background-color:var(--paper);background-image:var(--grain);background-blend-mode:multiply;color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;} img{display:block;max-width:100%;height:auto;} a{color:inherit;text-decoration:none;} ul{list-style:none;} button{font:inherit;cursor:pointer;} h1,h2,h3,h4{font-family:var(--font-display) !important;font-weight:500;line-height:1.15;letter-spacing:-.01em;} .dusk{background-color:var(--dusk);background-image:var(--grain);background-blend-mode:soft-light;color:var(--dusk-text);} .container{max-width:var(--max);margin-inline:auto;padding-inline:var(--space-3);} .section{padding-block:var(--space-6);} .section--alt{background-color:var(--paper-2);background-image:var(--grain);background-blend-mode:multiply;} .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:.6em;margin-bottom:var(--space-2);} .dusk .eyebrow{color:var(--gold);} .eyebrow::before{content:"";width:1.6em;height:1px;background:currentColor;display:inline-block;} .h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);margin-bottom:var(--space-2);max-width:26ch;font-weight:500;} .lede{font-size:1.05rem;max-width:60ch;opacity:.85;} .btn{display:inline-flex !important;align-items:center;gap:.6em;font-family:var(--font-body) !important;font-size:.92rem;font-weight:700;letter-spacing:0;padding:.95em 1.7em !important;border-radius:999px;border:1px solid transparent;text-decoration:none !important;transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;} .btn svg{width:16px;height:16px;flex-shrink:0;} .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;} .btn:disabled{opacity:.55;cursor:default;} .btn:disabled:hover{background:var(--green);} .btn--primary{background:var(--green) !important;color:var(--paper) !important;box-shadow:0 12px 28px -10px rgba(48,66,56,.4);} .btn--primary:hover{background:var(--green-deep) !important;color:var(--paper) !important;transform:translateY(-2px);} .btn--ghost{border-color:var(--paper-line);color:var(--text);background:rgba(255,255,255,.5);} .btn--ghost:hover{background:rgba(255,255,255,.85);transform:translateY(-2px);} .grid{display:grid;gap:var(--space-3);} .placeholder-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;color:var(--gold-deep);text-transform:uppercase;} .dusk .placeholder-tag{color:var(--gold);} .skip-link{position:absolute;left:-999px;top:0;background:var(--green);color:var(--paper);padding:.8em 1.2em;z-index:200;font-family:var(--font-mono);font-size:.85rem;} .skip-link:focus{left:var(--space-2);top:var(--space-2);} /* Scroll reveal — progressive enhancement only. The .reveal-ready gate is added by JS solely when IntersectionObserver exists and the visitor hasn't asked for reduced motion, so content is never hidden for anyone else. */ .reveal{transition:opacity .6s ease, transform .6s ease;} html.reveal-ready .reveal{opacity:0;transform:translateY(18px);} html.reveal-ready .reveal.is-visible{opacity:1;transform:none;} /* Persistent floating enquiry button */ .fab{ position:fixed;right:1.25rem;bottom:1.25rem;z-index:150; display:inline-flex;align-items:center;gap:.6em; background:var(--green);color:var(--paper); padding:.9em 1.3em;border-radius:999px; font-family:var(--font-mono);font-size:.82rem;font-weight:500;letter-spacing:.03em; box-shadow:0 8px 22px -6px rgba(33,28,22,.4); transition:background .15s ease, box-shadow .15s ease; } .fab:hover{background:var(--green-deep);box-shadow:0 10px 26px -6px rgba(33,28,22,.5);} .fab:focus-visible{outline:2px solid var(--gold);outline-offset:3px;} .fab svg{width:18px;height:18px;flex-shrink:0;} @media (max-width:600px){ .fab{padding:.9em;border-radius:50%;} .fab__text{display:none;} } /* Cookie consent banner */ .cookie-banner{ position:fixed;left:1.25rem;bottom:1.25rem;z-index:300; max-width:360px; background:var(--dusk);background-image:var(--grain);background-blend-mode:soft-light;color:var(--dusk-text); border:1px solid var(--dusk-line);border-radius:var(--radius); padding:var(--space-3); box-shadow:0 18px 40px rgba(38,35,31,.28); transform:translateY(calc(100% + 1.25rem));opacity:0;transition:transform .3s ease, opacity .3s ease; } .cookie-banner.is-visible{transform:translateY(0);opacity:1;} .cookie-banner p{font-size:.85rem;line-height:1.55;opacity:.9;margin-bottom:var(--space-2);} .cookie-banner a{text-decoration:underline;} .cookie-banner__actions{display:flex;gap:.6em;flex-wrap:wrap;} .cookie-banner__btn{font-family:var(--font-body);font-size:.8rem;font-weight:700;padding:.7em 1.3em;border-radius:999px;border:1px solid transparent;transition:background .15s ease, color .15s ease, border-color .15s ease;} .cookie-banner__btn--accept{background:var(--gold);color:var(--dusk);} .cookie-banner__btn--accept:hover{background:var(--gold-deep);color:var(--dusk-text);} .cookie-banner__btn--reject{background:transparent;color:var(--dusk-text);border-color:var(--dusk-line);} .cookie-banner__btn--reject:hover{border-color:var(--dusk-text);} @media (max-width:600px){ .cookie-banner{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;} } .photo{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--paper-2);border:1px solid var(--paper-line);box-shadow:var(--shadow);} .photo img,.photo video{width:100%;height:100%;object-fit:cover;display:block;} .photo__tag{position:absolute;left:0;right:0;bottom:0;padding:.7em .9em;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--white);background:rgba(43,37,28,.55);} /* ============================================================ NAV */ .nav{position:static;background:var(--paper);border-bottom:1px solid var(--paper-line);} .nav__inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-2);} .nav__brand{display:flex;align-items:center;gap:.65em;color:var(--text);font-family:var(--font-display);font-size:1.5rem;font-weight:600;} .nav__mark{width:50px;height:50px;flex-shrink:0;object-fit:contain;border-radius:10px;background:var(--paper);padding:3px;box-shadow:0 1px 3px rgba(38,35,31,.15);} .nav__brand-suffix{color:var(--gold-deep);} @media (min-width:900px){ .nav__brand{font-size:1.9rem;gap:.75em;} .nav__mark{width:62px;height:62px;border-radius:12px;} } .nav__links{display:flex;align-items:center;gap:var(--space-4);} .nav__list{display:flex;gap:var(--space-3);font-family:var(--font-mono);font-size:.8rem;} .nav__list a{color:var(--text);opacity:.75;} .nav__list a:hover{opacity:1;color:var(--green);} .nav__toggle{display:none;background:none;border:none;color:var(--text);position:relative;} .nav__toggle svg{width:24px;height:24px;} .nav__toggle svg line{transition:transform .2s ease, opacity .2s ease;transform-origin:12px 12px;} .nav__toggle[aria-expanded="true"] svg line:nth-child(1){transform:translateY(6px) rotate(45deg);} .nav__toggle[aria-expanded="true"] svg line:nth-child(2){opacity:0;} .nav__toggle[aria-expanded="true"] svg line:nth-child(3){transform:translateY(-6px) rotate(-45deg);} @media (max-width:860px){ .nav__list{position:fixed;inset:0 0 0 auto;height:100vh;width:min(78vw,320px);background:var(--paper);flex-direction:column;align-items:flex-start;padding:5.5rem var(--space-3) var(--space-3);gap:var(--space-3);transform:translateX(100%);transition:transform .25s ease;font-size:1rem;box-shadow:-8px 0 24px rgba(0,0,0,.08);z-index:120;} .nav__list.is-open{transform:translateX(0);} .nav__toggle{display:block;z-index:130;} } /* ============================================================ HERO */ .hero{padding-block:var(--space-5) 0;} .hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-5);align-items:center;} .hero h1{font-size:clamp(2.6rem,1.5rem + 4.2vw,4.6rem);margin-block:var(--space-2) var(--space-3);letter-spacing:-.025em;} .hero .lede{margin-bottom:var(--space-4);max-width:52ch;} .hero__ctas{display:flex;gap:var(--space-2);flex-wrap:wrap;} .hero__photo{aspect-ratio:4/5;box-shadow:0 20px 40px -24px rgba(43,37,28,.3);transition:transform .25s ease-out;} @media (max-width:900px){.hero__grid{grid-template-columns:1fr;} .hero__photo{aspect-ratio:4/5;max-width:420px;}} /* Manifest strip — qualitative trust points read as a shipping manifest's header line, not a "6 icons with captions" feature grid. */ .manifest{border-top:1px solid var(--paper-line);margin-top:var(--space-5);padding-block:var(--space-4);} .manifest__list{display:grid;grid-template-columns:repeat(6,1fr);column-gap:var(--space-3);row-gap:var(--space-3);} .manifest__item{padding-left:var(--space-3);border-left:1px solid var(--paper-line);display:flex;flex-direction:column;gap:.4em;} .manifest__item:nth-child(6n+1){border-left:none;padding-left:0;} .manifest__num{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--gold-deep);} .manifest__item span:last-child{font-size:.86rem;line-height:1.35;opacity:.85;} /* Each breakpoint picks a column count that divides 6 evenly, so a row never leaves a lone stranded item — then the divider reset is re-applied against that row's actual first column via nth-child. */ @media (max-width:980px){ .manifest__list{grid-template-columns:repeat(3,1fr);} .manifest__item{border-left:1px solid var(--paper-line);padding-left:var(--space-3);} .manifest__item:nth-child(3n+1){border-left:none;padding-left:0;} } @media (max-width:640px){ .manifest__list{grid-template-columns:repeat(2,1fr);} .manifest__item{border-left:1px solid var(--paper-line);padding-left:var(--space-3);} .manifest__item:nth-child(2n+1){border-left:none;padding-left:0;} } @media (max-width:420px){ .manifest__list{grid-template-columns:1fr;row-gap:var(--space-2);} .manifest__item{border-left:none;padding-left:0;border-top:1px solid var(--paper-line);padding-top:var(--space-2);} .manifest__item:first-child{border-top:none;padding-top:0;} } /* Saw-cut divider between hero and story */ .cut-divider{color:var(--gold);line-height:0;} .cut-divider svg{width:100%;height:10px;display:block;} /* ============================================================ STORY */ .story__grid{grid-template-columns:.9fr 1.1fr;align-items:center;} .story blockquote{font-family:var(--font-display);font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);font-weight:400;line-height:1.4;font-style:italic;color:var(--text);border-left:2px solid var(--gold);padding-left:var(--space-3);margin-top:var(--space-3);} @media (max-width:900px){.story__grid{grid-template-columns:1fr;}} /* ============================================================ PROCESS */ .process__intro{margin-bottom:var(--space-4);} .process__grid{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));} .step{background:var(--white);border:1px solid var(--paper-line);border-radius:var(--radius-lg);padding:var(--space-3);box-shadow:0 10px 28px rgba(38,35,31,.06);transition:box-shadow .2s ease, transform .2s ease;} .step:nth-child(even){background:var(--paper-2);} .step:hover{box-shadow:var(--shadow);transform:translateY(-3px);} .step__top{display:flex;align-items:center;gap:.7em;margin-bottom:var(--space-2);} .step__icon{width:2.4rem;height:2.4rem;border-radius:var(--radius-sm);background:var(--green);color:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .step__icon svg{width:19px;height:19px;} .step__num{font-family:var(--font-mono);font-size:.72rem;color:var(--gold-deep);letter-spacing:.04em;} .step h4{font-size:1rem;font-weight:600;margin-bottom:.4em;} .step p{font-size:.88rem;opacity:.75;} /* ============================================================ PRODUCTS — Marble / Granite / Accessories */ .cat-hero{padding-block:var(--space-5) var(--space-4);border-bottom:1px solid var(--paper-line);} .cat-back{display:inline-flex;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:var(--space-3);} .cat-back:hover{color:var(--green);} .cat-hero h1{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.2rem);letter-spacing:-.02em;margin-block:var(--space-2) var(--space-2);} .cat-hero p{font-size:1.02rem;max-width:60ch;opacity:.82;} .gallery-grid{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));} .gallery-grid .photo{aspect-ratio:4/3;transition:border-color .15s ease;} .gallery-grid .photo:hover{border-color:var(--gold);} .coming-soon{border:1px dashed var(--paper-line);border-radius:var(--radius);padding:var(--space-4);text-align:center;margin-top:var(--space-4);} .coming-soon p{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);} /* ============================================================ BUYERS */ .buyers__row{display:flex;flex-wrap:wrap;gap:.6em;} .buyers__row span{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.03em;border:1px solid var(--dusk-line);border-radius:var(--radius);padding:.55em .95em;} /* ============================================================ PROMISE */ .promise{text-align:center;} .promise::before{content:'\201C';display:block;font-family:var(--font-display);font-size:5rem;line-height:1;color:var(--gold);opacity:.4;margin-bottom:-.6rem;} .promise p{font-family:var(--font-display);font-size:clamp(1.4rem,1.1rem + 1.6vw,2.1rem);font-weight:400;max-width:38ch;margin-inline:auto;line-height:1.4;} /* ============================================================ SOURCING REGIONS */ .sourcing__grid{grid-template-columns:1fr 1fr;align-items:center;} .regions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2) var(--space-3);} .region{border-top:1px solid var(--paper-line);padding-top:.9em;} .region h4{font-family:var(--font-mono);font-size:.82rem;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.3em;} .region p{font-size:.86rem;opacity:.72;} @media (max-width:820px){.sourcing__grid{grid-template-columns:1fr;} .regions{grid-template-columns:1fr;}} .quarry-grid{grid-template-columns:repeat(3,1fr);} .quarry-photo{aspect-ratio:16/10;} .transform{border-top:1px solid var(--paper-line);margin-top:var(--space-5);padding-top:var(--space-4);} .transform__pair{display:flex;align-items:center;gap:var(--space-3);} .transform__item{flex:1;} .transform__item .photo{aspect-ratio:4/3;margin-bottom:.7em;} .transform__label{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.4em .8em;border-radius:var(--radius);} .transform__label--raw{background:var(--paper);border:1px solid var(--gold);color:var(--gold-deep);} .transform__label--finished{background:var(--green);color:var(--paper);} .transform__arrow{font-size:1.6rem;color:var(--gold);flex-shrink:0;padding-top:2rem;} /* Slab cards — the domain artifact. Venora Stone's actual product is a cut stone sample, so the catalogue card is shaped like one: a raw cut corner (top-left, mirroring the quarry) opposite a graded swatch tag (top-right, mirroring the finished/inspected slab), with a mineral-vein rule under the title. Not a generic card with a photo dropped in. */ .category-grid{grid-template-columns:repeat(3,1fr);} .slab-card{position:relative;display:block;background:var(--white);border:1px solid var(--paper-line);border-radius:var(--radius-lg);box-shadow:0 10px 28px rgba(38,35,31,.06);transition:box-shadow .2s ease, transform .2s ease;} .slab-card:hover{box-shadow:var(--shadow);transform:translateY(-4px) rotate(-.3deg);} .slab-card__photo{aspect-ratio:4/3;overflow:hidden;clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);} .slab-card__photo img{width:100%;height:100%;object-fit:cover;display:block;} .slab-card__tag{position:absolute;top:var(--space-2);right:var(--space-2);background:var(--paper);border:1px solid var(--gold);border-radius:999px;padding:.35em .8em .35em 1.5em;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);box-shadow:0 4px 10px rgba(38,35,31,.16);} .slab-card__tag::before{content:"";position:absolute;left:.55em;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--paper);border:1px solid var(--gold-deep);} .slab-card__body{position:relative;padding:var(--space-3);} .slab-card__body::before{content:"";position:absolute;top:0;left:var(--space-3);right:var(--space-3);height:2px;background:linear-gradient(90deg,var(--gold),transparent 75%);} .slab-card__body h3{font-size:1.3rem;margin-bottom:.4em;} .slab-card__body p{font-size:.92rem;opacity:.75;margin-bottom:.8em;} .slab-card__link{font-family:var(--font-body);font-weight:700;font-size:.88rem;color:var(--green);} @media (max-width:900px){.category-grid{grid-template-columns:1fr 1fr;}} @media (max-width:600px){.category-grid{grid-template-columns:1fr;}} @media (max-width:900px){.quarry-grid{grid-template-columns:1fr 1fr;}} @media (max-width:820px){.quarry-grid{grid-template-columns:1fr;} .transform__pair{flex-direction:column;} .transform__arrow{transform:rotate(90deg);padding-top:0;}} /* ============================================================ CONTACT */ .contact__grid{grid-template-columns:1fr .8fr;align-items:start;} .form{display:flex;flex-direction:column;gap:var(--space-2);} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);} .field{display:flex;flex-direction:column;gap:.4em;} .field label{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7;} .field input,.field select,.field textarea{width:100%;min-width:0;font-family:var(--font-body);font-size:.95rem;padding:.75em .9em;border:1px solid var(--paper-line);border-radius:var(--radius);background:var(--white);color:var(--text);} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;} .field--check{flex-direction:row;align-items:center;gap:.6em;} .field--check input{width:18px;height:18px;flex:0 0 auto;} .field--check label{text-transform:none;font-size:.82rem;letter-spacing:0;opacity:.85;} .field--file{font-size:.85rem;} .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .phone-row{display:flex;gap:.5rem;} .phone-row__code{flex:0 0 auto;width:auto;max-width:9.5rem;} .phone-row__number{flex:1 1 auto;min-width:0;} .form__note{font-size:.78rem;opacity:.6;} .form__success{display:none;background:var(--green);color:var(--paper);padding:var(--space-3);border-radius:var(--radius);font-family:var(--font-mono);font-size:.9rem;} .form__success.is-visible{display:block;} .form__error{display:none;background:var(--white);color:#7A2E24;border:1px solid #C97060;padding:var(--space-3);border-radius:var(--radius);font-family:var(--font-mono);font-size:.85rem;} .form__error.is-visible{display:block;} .form__sending{display:none;font-family:var(--font-mono);font-size:.82rem;opacity:.65;} .form__sending.is-visible{display:block;} .contact__details{display:flex;flex-direction:column;gap:var(--space-3);} .contact__detail h4{font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-deep);margin-bottom:.3em;} #submitBtn{align-self:flex-start;} @media (max-width:900px){.contact__grid{grid-template-columns:1fr;} .form__row{grid-template-columns:1fr;}} @media (max-width:600px){ /* 16px minimum stops iOS Safari auto-zooming the page on field focus */ .field input,.field select,.field textarea{font-size:1rem;padding:.85em .9em;} .phone-row{flex-wrap:wrap;} .phone-row__code{flex:1 1 auto;max-width:none;} .phone-row__number{flex:1 1 140px;} #submitBtn{align-self:stretch;justify-content:center;} } /* ============================================================ FOOTER */ .footer{padding-block:var(--space-5) var(--space-3);} .footer__grid{grid-template-columns:1.4fr repeat(3,1fr);margin-bottom:var(--space-4);} .footer__col h4{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);margin-bottom:var(--space-2);} .footer__col ul{display:flex;flex-direction:column;gap:.6em;font-size:.88rem;opacity:.82;} .footer__col ul a:hover{color:var(--gold);} .footer__brand p{font-size:.86rem;opacity:.68;max-width:34ch;margin-top:var(--space-2);} .footer__bottom{border-top:1px solid var(--dusk-line);padding-top:var(--space-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);font-size:.76rem;opacity:.6;font-family:var(--font-mono);} @media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.footer__grid{grid-template-columns:1fr;}}