/* ======================================================================= FLAZIZ CATERING — the whole look of the site, in one file. HOW TO READ THIS FILE It runs top to bottom, in four parts, and the ORDER is the important bit: 1. THE PALETTE every colour, named once (right below) 2. ELEMENTOR'S RESET its defaults pushed out of the way 3. THE DESIGN buttons, cards, headings, the form, the footer 4. SCREEN SIZES the phone and tablet adjustments, last WHY :where() IS EVERYWHERE Nearly every rule is written :where(.thing){…} instead of .thing{…}. That makes the rule ZERO STRENGTH. When two CSS rules both apply, the stronger one wins no matter what order they are in — so a normal rule here would beat whatever you pick in the Elementor panel, and your colour choice would silently do nothing. Zero strength means Elementor always wins, which is what makes the site editable without touching code. DO NOT EDIT THIS FILE ON THE LIVE SITE. A theme update replaces it. Put your own CSS in Flaziz > My own CSS, which survives every update. ======================================================================= */ /* ----------------------------------------------------------------------- 1. THE PALETTE Every colour on the site is named here, once. Nothing further down ever writes a colour directly — it asks for the name with var(--gold). So changing the gold across the whole site is one edit, right here. :root means "the very top of the document", so these names are readable from anywhere below. ----------------------------------------------------------------------- */ :root{ --ground:#FDF9F6; /* the cream page background */ --ground-2:#F7F1EA; /* a slightly darker cream, for alternating bands */ --forest:#152B1A; /* the dark green — most text and the solid buttons */ --band:#0B291D; /* the deep green strip and the footer */ --gold:#B18845; /* the gold from the logo — labels, icons, small accents */ --gold-soft:#D9BE8C; /* a paler gold, for text sitting on dark green */ --ink:#152B1A; /* body text */ --muted:#5E6A5C; /* grey-green, for small print and captions */ --hair:rgba(21,43,26,.14); /* the faint line between rows and cards */ --glass:rgba(255,253,250,.72); /* the frosted panel background */ --glass-2:rgba(255,253,250,.55); /* a fainter frosted panel */ --glass-line:rgba(255,255,255,.75); /* the light edge on a frosted panel */ --shadow:0 24px 60px -30px rgba(11,41,29,.45); /* the soft drop shadow under cards */ --veil:rgba(253,249,246,.86); /* the cream wash laid over the background video */ --tint:rgba(21,43,26,.10); /* the colour wash on top of that */ --on-band:#F4EDE2; /* text colour when it sits on the green strip */ --max:1160px; /* the widest the content ever gets, in px */ } /* ========================================================================= Elementor's own defaults, cleared out of the way FIRST so the design below wins, and so anything you set in the Elementor panel wins over both. Nothing here has any specificity, on purpose. ========================================================================= */ :where(body.flz .elementor-section),:where(body.flz .elementor-container),:where(body.flz .elementor-column-wrap),:where(body.flz .elementor-widget-wrap){background-color:transparent} :where(body.flz .elementor-widget-wrap){padding:0} :where(body.flz .elementor-section.elementor-inner-section){padding:0} :where(body.flz .elementor-inner-section .elementor-widget-wrap){padding:0} :where(body.flz .elementor-section.elementor-inner-section){padding-top:0;padding-bottom:0} :where(body.flz .elementor-column){min-height:0} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} :where(body){ margin:0;background:var(--ground);color:var(--ink); font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px;line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased; } :where(img,video){display:block;max-width:100%} :where(a){color:inherit} :where(h1,h2,h3){font-family:"Cormorant Garamond",Georgia,serif;font-weight:600; margin:0;text-wrap:balance;line-height:1.12} :where(h1,h2,h3){color:var(--forest)} :where(p){margin:0} :where(body.flz){color:var(--ink)} :where(.elementor-widget-text-editor,:where(.elementor-widget-flaziz-markets),:where(.elementor-widget-flaziz-faq),:where(.elementor-widget-flaziz-contact-cards),:where(.elementor-widget-flaziz-feature),:where(.elementor-widget-flaziz-defs)){color:var(--muted)} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} /* ---------- background video, kept faint so panels read as glass ---------- */ #bg{position:fixed;inset:0;z-index:-10;pointer-events:none;background:var(--ground)} #bg video{width:100%;height:100%;object-fit:cover;filter:saturate(.85)} #bg .veil{position:absolute;inset:0;background:var(--veil)} #bg .tint{position:absolute;inset:0;background:var(--tint)}/* ---------- shared ---------- */ :where(.wrap){max-width:var(--max);margin:0 auto;padding:0 22px} :where(section){padding:84px 0} @media(max-width:700px){:where(section){padding:56px 0}} /* ----------------------------------------------------------------------- THE SMALL GOLD CAPITALS above a heading. letter-spacing is what gives them that spread-out look; text-transform makes them capitals without you having to type in caps. ----------------------------------------------------------------------- */ :where(.eyebrow){font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase; margin:0} :where(.eyebrow){color:var(--gold)} :where(.lede){font-size:17px;max-width:34rem} :where(.script){font-family:"Italianno",cursive;font-size:34px;line-height:1.2} :where(.script){color:var(--forest)} :where(.leaf){display:block;width:46px;height:14px;margin:14px auto;opacity:.85} :where(.rule){display:flex;align-items:center;gap:16px;justify-content:center;color:var(--gold)} :where(.rule)::before,:where(.rule)::after{content:"";height:1px;background:var(--gold);opacity:.45;flex:1;max-width:180px} :where(.center){text-align:center} :where(.h-sec){font-size:clamp(26px,4vw,40px)} :where(.h-page){font-size:clamp(30px,6vw,58px)}/* ---------- glass ---------- */ /* ----------------------------------------------------------------------- FROSTED PANELS backdrop-filter blurs whatever is behind the panel — which is the background video. That is the whole effect. ----------------------------------------------------------------------- */ :where(.glass){ background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(120%); backdrop-filter:blur(18px) saturate(120%); border:1px solid var(--glass-line); box-shadow:var(--shadow); border-radius:4px; } :where(.glass-soft){ background:var(--glass-2); -webkit-backdrop-filter:blur(12px) saturate(115%); backdrop-filter:blur(12px) saturate(115%); border:1px solid var(--glass-line); box-shadow:0 18px 40px -28px rgba(11,41,29,.5); border-radius:4px; } @supports not (backdrop-filter:blur(1px)){ :where(.glass){background:var(--ground)} :where(.glass-soft){background:var(--ground-2)} } :where(.pad){padding:28px} @media(min-width:700px){:where(.pad){padding:40px}}/* ---------- buttons ---------- */ /* ----------------------------------------------------------------------- BUTTONS .btn is the shared shape. .btn-solid fills it in, .btn-line outlines it. Add either in Elementor: select the button > Advanced > CSS Classes. ----------------------------------------------------------------------- */ :where(.btn){display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 28px;font-size:12px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent; font-family:inherit;transition:background .25s,color .25s,border-color .25s} :where(.btn-solid){background:var(--band);color:var(--on-band)} :where(.btn-solid:hover){background:var(--forest)} :where(.btn-gold){background:var(--gold);color:#1B1206} :where(.btn-gold:hover){background:var(--gold-soft)} :where(.btn-line){background:transparent;color:var(--gold);border-color:var(--gold)} :where(.btn-line:hover){background:var(--gold);color:#1B1206} :where(.btn:disabled){opacity:.4;cursor:not-allowed} :where(.btn-row){display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}/* ---------- header ---------- */ header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,border-color .3s; border-bottom:1px solid transparent} header.stuck{background:var(--veil);-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);border-bottom-color:var(--hair)} .bar{max-width:var(--max);margin:0 auto;padding:12px 22px;display:flex;align-items:center; justify-content:space-between;gap:20px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0} .brand img{width:44px;height:44px;object-fit:contain;mix-blend-mode:multiply} :root[data-theme="dark"] .brand img, :root:not([data-theme="light"]) .brand img{mix-blend-mode:normal} @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .brand img{mix-blend-mode:multiply}} .brand .wm{font-family:"Cormorant Garamond",serif;font-size:21px;letter-spacing:.22em; color:var(--forest);line-height:1} .brand .sub{font-size:8.5px;letter-spacing:.34em;color:var(--gold);text-transform:uppercase} nav.main{display:none;gap:26px;align-items:center} @media(min-width:1080px){nav.main{display:flex}} nav.main a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none; color:var(--ink);opacity:.75;padding:6px 0;border-bottom:1px solid transparent;transition:.2s} nav.main a:hover{opacity:1} nav.main a.on{opacity:1;border-bottom-color:var(--gold);color:var(--gold)} .hdr-right{display:flex;align-items:center;gap:12px} .burger{display:flex;width:42px;height:42px;align-items:center;justify-content:center; border:1px solid var(--hair);background:var(--glass);color:var(--ink);cursor:pointer; font-size:17px;line-height:1;border-radius:2px} @media(min-width:1080px){.burger{display:none}} .hdr-cta{display:none} @media(min-width:620px){.hdr-cta{display:inline-flex}} .drawer{display:none;background:var(--ground);border-top:1px solid var(--hair)} .drawer.open{display:block} @media(min-width:1080px){.drawer.open{display:none}} .drawer a{display:block;padding:15px 24px;text-decoration:none;font-size:12px; letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--hair)}/* ---------- pages ---------- */ :where(main){position:relative} .page{display:block} /* ---------- hero ---------- */ .hero{padding-top:132px;padding-bottom:60px} :where(.hero-grid){display:grid;gap:36px;align-items:center} @media(min-width:900px){:where(.hero-grid){grid-template-columns:0.92fr 1.08fr;gap:52px}} :where(.hero .elementor-widget-heading){font-size:clamp(34px,5.4vw,62px)} :where(.hero h1){font-size:inherit} :where(.hero h1 .gold){color:var(--gold)} :where(.kicker){color:var(--muted)} :where(.kicker){font-size:11px;letter-spacing:.28em;text-transform:uppercase; margin-top:16px} :where(.hero-img){border-radius:4px;overflow:hidden;border:1px solid var(--glass-line); box-shadow:var(--shadow)} :where(.hero-img img){width:100%;aspect-ratio:4/3;object-fit:cover}/* ---------- specialities ---------- */ :where(.trio){display:grid;gap:22px;margin-top:44px} @media(min-width:820px){:where(.trio){grid-template-columns:repeat(3,1fr)}} :where(.spec){overflow:hidden;display:flex;flex-direction:column} .spec .ph{position:relative} :where(.spec img){width:100%;aspect-ratio:16/10;object-fit:cover} :where(.spec .medal){position:absolute;left:50%;bottom:-26px;transform:translateX(-50%); width:52px;height:52px;border-radius:50%;background:var(--ground);border:1px solid var(--gold); display:flex;align-items:center;justify-content:center;color:var(--gold)} :where(.spec .body){padding:44px 24px 26px;text-align:center;display:flex;flex-direction:column; gap:12px;flex:1} :where(.spec .elementor-widget-heading){font-size:22px;letter-spacing:.06em} :where(.spec h3){font-size:inherit;letter-spacing:inherit} :where(.spec .body){font-size:14px} :where(.spec p){font-size:inherit} :where(.spec .more){margin-top:auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);text-decoration:none;padding-top:8px}/* ---------- green band ---------- */ :where(.band){background:var(--band)} :where(.band){color:var(--on-band)} :where(.band h2),:where(.band h3){color:var(--on-band)} :where(.band .elementor-widget-text-editor,:where(.band .elementor-widget-flaziz-feature)){color:rgba(244,237,226,.75)} :where(.band .eyebrow){color:var(--gold-soft)} :where(.band-grid){display:grid;gap:38px;align-items:start} @media(min-width:960px){:where(.band-grid){grid-template-columns:0.85fr 1.15fr;gap:56px}} :where(.four){display:grid;gap:26px} @media(min-width:560px){:where(.four){grid-template-columns:1fr 1fr}} @media(min-width:960px){:where(.four){grid-template-columns:repeat(4,1fr);gap:0}} :where(.four>div),:where(.four>.elementor-column){padding:0 20px} @media(min-width:960px){.four>div+div{border-left:1px solid rgba(244,237,226,.18)}} :where(.four h3){font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-family:"Jost",sans-serif; font-weight:500;margin-top:12px} :where(.four p){font-size:13px;margin-top:8px} .ico{width:40px;height:40px;color:var(--gold-soft)}/* ---------- story ---------- */ :where(.story-grid){display:grid;gap:34px;align-items:center} @media(min-width:900px){:where(.story-grid){grid-template-columns:1fr 1.15fr;gap:48px}} :where(.story-imgs){display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:12px} :where(.story-imgs img){width:100%;height:100%;object-fit:cover;border-radius:3px} .story-imgs .tall{grid-row:span 2} :where(.defs){display:grid;gap:8px;margin-top:22px} :where(.defs div){display:flex;gap:16px;align-items:baseline} :where(.defs dt){font-family:"Cormorant Garamond",serif;font-size:24px;letter-spacing:.2em; color:var(--forest);min-width:74px} :where(.defs dd){margin:0;font-size:14px} :where(.defs dd){color:var(--muted)}/* ---------- markets ---------- */ :where(.markets){display:grid;gap:16px;margin-top:36px} @media(min-width:760px){:where(.markets){grid-template-columns:repeat(2,1fr)}} @media(min-width:1040px){:where(.markets){grid-template-columns:repeat(4,1fr)}} :where(.mkt){display:flex;gap:16px;align-items:flex-start;padding:20px} :where(.date){flex-shrink:0;width:52px;text-align:center;background:var(--band);color:var(--on-band); padding:8px 0;border-radius:2px} :where(.date b){display:block;font-family:"Cormorant Garamond",serif;font-size:22px;line-height:1} :where(.date span){font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.8} :where(.mkt h3){font-size:16px;font-family:"Jost",sans-serif;font-weight:500;letter-spacing:.02em} :where(.mkt p){font-size:13px;margin-top:2px} :where(.mkt .hrs){font-size:13px;margin-top:6px} :where(.mkt .hrs){color:var(--gold)}/* ---------- social strip ---------- */ :where(.handles){display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:14px} :where(.handles a){display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em; text-decoration:none;color:var(--muted)} :where(.handles svg){width:16px;height:16px;fill:var(--gold)} :where(.strip){display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:26px} @media(min-width:820px){:where(.strip){grid-template-columns:repeat(6,1fr)}} :where(.strip img){width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;transition:transform .6s} .strip a:hover img{transform:scale(1.05)} :where(.strip a){overflow:hidden;border-radius:2px;display:block}/* ---------- footer ---------- */ footer{background:var(--band);color:var(--on-band);padding:56px 0 26px} footer h3{color:var(--on-band);font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.2em; text-transform:uppercase;margin-bottom:16px} footer p,footer li{color:rgba(244,237,226,.72);font-size:13px} footer a,header a,.drawer a{color:inherit;text-decoration:none} footer a{text-decoration:none} footer a:hover{color:var(--gold-soft)} .f-grid{display:grid;gap:34px} @media(min-width:700px){:where(.f-grid){grid-template-columns:1.4fr 1fr 1fr 1fr}} footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .f-legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(244,237,226,.18); display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:11.5px; color:rgba(244,237,226,.55)} .f-logo img{width:88px;filter:brightness(0) invert(1);opacity:.92} .socials{display:flex;gap:10px;margin-top:14px} .socials a{width:34px;height:34px;border:1px solid rgba(244,237,226,.3);display:flex; align-items:center;justify-content:center;border-radius:50%} .socials svg{width:15px;height:15px;fill:var(--on-band)}/* ---------- food page ---------- */ :where(.dish){display:grid;gap:30px;align-items:center;padding:34px 0} @media(min-width:900px){:where(.dish){grid-template-columns:1fr 1fr;gap:48px}} .dish.flip .ph{order:2} @media(max-width:899px){.dish.flip .ph{order:0}} :where(.dish img){width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:3px} :where(.dish .sub-logo){width:150px;margin-bottom:14px;mix-blend-mode:multiply} :root[data-theme="dark"] .dish .sub-logo{mix-blend-mode:normal;filter:brightness(0) invert(.92)} :where(.chips){display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} :where(.chip){font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--gold); color:var(--gold);padding:5px 11px;border-radius:2px}/* ---------- gallery ---------- */ :where(.gal){display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:36px} @media(min-width:820px){:where(.gal){grid-template-columns:repeat(3,1fr)}} :where(.gal img){width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}/* ---------- contact ---------- */ :where(.cards3){display:grid;gap:18px;margin-top:36px} @media(min-width:760px){:where(.cards3){grid-template-columns:repeat(3,1fr)}} :where(.ccard){padding:28px;text-decoration:none;display:block} :where(.ccard h3){font-size:19px;margin-bottom:6px} :where(.ccard p){font-size:13px} :where(.ccard b){display:block;margin-top:10px;font-weight:500;word-break:break-word} :where(.ccard b){color:var(--gold)} :where(.faq){display:grid;gap:0;margin-top:10px} :where(.faq details){border-bottom:1px solid var(--hair);padding:14px 0} :where(.faq summary){cursor:pointer;font-family:"Cormorant Garamond",serif;font-size:19px; color:var(--forest);list-style:none;display:flex;justify-content:space-between;gap:16px} :where(.faq summary)::-webkit-details-marker{display:none} :where(.faq summary)::after{content:"+";color:var(--gold);font-family:"Jost",sans-serif} .faq details[open] summary::after{content:"–"} :where(.faq p){font-size:14px;margin-top:10px}/* ---------- booking form ---------- */ :where(.form-wrap){max-width:46rem;margin:0 auto} .pips{display:flex;gap:7px;margin-bottom:26px} .pips div{flex:1;height:2px;background:var(--hair)} .pips div.on{background:var(--gold)} :where(label){display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:20px 0 7px;font-weight:500} :where(input,select,textarea){width:100%;padding:13px 15px;font-family:inherit;font-size:15px; color:var(--ink);background:var(--glass-2);border:1px solid var(--hair);border-radius:2px; outline:none;transition:border-color .2s} input:focus,select:focus,textarea:focus{border-color:var(--gold)} input::placeholder,textarea::placeholder{color:var(--muted);opacity:.6} select option{background:var(--ground);color:var(--ink)} :where(textarea){min-height:92px;resize:vertical} .two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .packs{display:grid;gap:12px;margin-top:10px} @media(min-width:620px){.packs{grid-template-columns:1fr 1fr}} .pack{text-align:left;padding:20px;cursor:pointer;background:var(--glass-2); border:1px solid var(--hair);border-radius:3px;font-family:inherit;transition:.2s;color:var(--ink)} .pack:hover{border-color:var(--gold-soft)} .pack.sel{border-color:var(--gold);background:var(--glass);box-shadow:0 0 0 1px var(--gold)} .pack .nm{font-family:"Cormorant Garamond",serif;font-size:21px;color:var(--forest); display:flex;justify-content:space-between;align-items:baseline;gap:12px} .pack .pr{font-size:15px;color:var(--gold);font-family:"Jost",sans-serif;white-space:nowrap} .pack .ds{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.55} .pack .inc{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold); margin-top:10px} .total{margin-top:24px;padding:24px;text-align:center;border:1px solid var(--gold); border-radius:3px;background:var(--glass-2)} .total .amt{font-family:"Cormorant Garamond",serif;font-size:42px;color:var(--forest);line-height:1} .total .cap{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); margin-top:8px} .total .cap2{font-size:13px;color:var(--muted);margin-top:4px} .remain{margin-top:18px;padding:14px;text-align:center;font-size:14px;border-radius:2px; border:1px solid var(--hair);background:var(--glass-2);color:var(--muted)} .remain.ok{border-color:#4B7F52;color:#3E7146;background:rgba(75,127,82,.10)} .remain.over{border-color:#A8432F;color:#A8432F;background:rgba(168,67,47,.10)} :root[data-theme="dark"] .remain.ok{color:#9CCBA2} :root[data-theme="dark"] .remain.over{color:#E8A092} .combo{border:1px solid var(--hair);border-radius:3px;padding:18px;margin-top:16px; background:var(--glass-2)} .combo h3{font-size:17px;margin-bottom:6px} .seg{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap} .seg button{flex:1 1 130px;padding:11px;border:1px solid var(--hair);background:transparent; color:var(--ink);font-family:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase; cursor:pointer;border-radius:2px;transition:.2s} .seg button:hover{border-color:var(--gold-soft)} .seg button.sel{background:var(--gold);border-color:var(--gold);color:#1B1206} .note{font-size:12.5px;color:var(--muted);text-align:right;margin-top:8px} .linkish{background:none;border:0;color:#A8432F;font-size:12px;text-decoration:underline; cursor:pointer;padding:0;margin-top:12px;font-family:inherit} .nav-btns{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap} .nav-btns .btn{flex:1 1 150px} .tick{font-size:38px;color:var(--gold)} .summary{border:1px solid var(--hair);border-radius:3px;padding:20px;margin-top:24px; text-align:left;font-size:14px;display:grid;gap:9px} .summary span{color:var(--muted)} .summary b{font-weight:500} /* ---------- reveal ---------- */ /* Blocks fade in as you scroll. The hidden state only applies once the theme's own script has run and put .flz-anim on the page — so if the script is blocked, or we are inside the Elementor editor, nothing is ever hidden and everything stays clickable. */ .flz-anim .rev{opacity:0;transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .flz-anim .rev.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .flz-anim .rev{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} #bg video{display:none} } /* ---------- preview banner ---------- */ #pv{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:80; background:var(--band);color:var(--on-band);padding:10px 16px;border-radius:2px; font-size:11.5px;letter-spacing:.08em;display:flex;gap:14px;align-items:center; max-width:calc(100vw - 28px);box-shadow:var(--shadow)} #pv button{background:none;border:0;color:rgba(244,237,226,.6);cursor:pointer;font-size:15px} /* ======================================================================= QUOTE BUILDER — the original two-mode layout, extended ======================================================================= */ .flz-pips{display:flex;gap:7px;margin-bottom:26px} .flz-pips div{flex:1;height:2px;background:var(--hair)} .flz-pips div.on{background:var(--gold)} .flz-seg{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap} .flz-seg button{flex:1 1 140px;padding:12px;border:1px solid var(--hair);background:transparent; color:var(--ink);font-family:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase; cursor:pointer;border-radius:2px;transition:.2s} .flz-seg button:hover{border-color:var(--gold-soft)} .flz-seg button.sel{background:var(--gold);border-color:var(--gold);color:#1B1206} .flz-row{border:1px solid var(--hair);border-radius:3px;padding:20px;margin-top:16px; background:var(--glass-2)} .flz-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px; padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--hair)} .flz-row-head strong{font-family:"Cormorant Garamond",serif;font-size:19px;color:var(--forest); font-weight:600} .flz-row-name{display:flex;flex-direction:column;gap:3px} .flz-row-sub{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.55} .flz-row-price{font-size:13px;color:var(--gold);white-space:nowrap;padding-top:4px} .flz-row-x{background:none;border:1px solid var(--hair);color:var(--muted);width:28px;height:28px; border-radius:50%;cursor:pointer;font-size:12px;line-height:1;flex-shrink:0;transition:.2s} .flz-row-x:hover{border-color:#A8432F;color:#A8432F} .flz-row-warn{font-size:12.5px;color:#A8432F;margin-top:10px} :root[data-theme="dark"] .flz-row-warn{color:#E8A092} .flz-line-total{font-size:12.5px;color:var(--muted);text-align:right;margin-top:8px; font-variant-numeric:tabular-nums} .flz-add{width:100%;margin-top:16px;padding:14px;border:1px dashed var(--gold);background:transparent; color:var(--gold);font-family:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase; cursor:pointer;border-radius:2px;transition:.2s} .flz-add:hover{background:var(--gold);color:#1B1206;border-style:solid} .flz-remain{margin-top:20px;padding:15px;text-align:center;font-size:14px;border-radius:2px; border:1px solid var(--hair);background:var(--glass-2);color:var(--muted)} .flz-remain.ok{border-color:#4B7F52;color:#3E7146;background:rgba(75,127,82,.10)} .flz-remain.over{border-color:#A8432F;color:#A8432F;background:rgba(168,67,47,.10)} :root[data-theme="dark"] .flz-remain.ok{color:#9CCBA2} :root[data-theme="dark"] .flz-remain.over{color:#E8A092} .flz-hint{font-size:13px;color:var(--muted);margin-top:12px} .flz-rough{margin-top:16px;padding:16px 18px;border-radius:3px;font-size:15px; color:var(--muted);background:var(--glass-2);border:1px solid var(--hair);line-height:1.6} .flz-rough.has{border-color:var(--gold);color:var(--ink)} .flz-rough strong{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px; color:var(--forest);font-weight:600} /* ========================================================================= WORDPRESS BRIDGE The stylesheet above is the preview's, unchanged. Everything below only deals with things WordPress adds that the preview never had. ========================================================================= */ /* the admin bar pushes the fixed header down when you are logged in */ body.admin-bar header{top:32px} @media(max-width:782px){body.admin-bar header{top:46px}}/* Elementor wraps page content; make it get out of the way */ :where(body.flz .elementor-section.elementor-section-boxed>.elementor-container){max-width:none} :where(body.flz .elementor-widget-shortcode),:where(body.flz .elementor-widget-container){margin:0} :where(body.flz .elementor-widget:not(:last-child)){margin-bottom:0} /* Hello Elementor's own page padding */ body.flz .site-main,body.flz #content,body.flz .page-content{padding:0;margin:0;max-width:none} body.flz .entry-header,body.flz .page-header{display:none} /* WordPress galleries and captions inside our sections */ body.flz figure{margin:0} body.flz img{height:auto} /* skip link */ body.flz .skip-link{position:absolute;left:-9999px} body.flz .skip-link:focus{left:8px;top:8px;z-index:900;background:var(--ground); color:var(--forest);padding:10px 16px;border:1px solid var(--gold)} /* WordPress menus come out as