/* SavvyFlyer static-page dark skin v1 — 2026-08-09
*
* Shared across all NON-destination pages (guides, guide articles, savvy-score
* explainer, contact, our-story, legal set, 404, site-stats). Mirrors the
* homepage round-4b design system: deep-navy gradient, glass cards with the
* 3D elevation shadow, Space Grotesk display type, aqua actions, traffic-light
* tier palette. Destination pages use sf-country-dark-1.css instead.
*
* Contract: linked per page from Webflow page-head custom code. It restyles
* the legacy light-theme classes in place — no copy, links or SEO metadata
* are touched. Selectors are scoped to the legacy class names so a page that
* doesn't use a block simply ignores those rules.
*/
/* ---- base ------------------------------------------------------ */
html{background-color:#070b14}
body{background:linear-gradient(180deg,#070b14 0%,#0d1424 60%,#070b14 100%);background-attachment:fixed;font-family:Inter,sans-serif;color:#cbd5e1;overflow-x:clip;-webkit-font-smoothing:antialiased}
[id]{scroll-margin-top:84px}
/* ambient blobs (pure CSS — no JS on static pages) */
body::before,body::after{content:"";position:fixed;border-radius:9999px;filter:blur(90px);pointer-events:none;z-index:0}
body::before{width:480px;height:480px;background:rgba(34,211,238,.13);top:-160px;left:-128px}
body::after{width:420px;height:420px;background:rgba(167,139,250,.13);top:38rem;right:-160px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---- legacy skeleton: section / container -------------------- */
.section-2{position:relative;z-index:1;background-image:none!important;background-color:transparent!important;padding-top:0!important}
.container-3{background-color:transparent!important;max-width:1152px}
/* ---- nav bar (homepage sf2-nav look; logo swapped to white in Designer) */
.link-block-2{position:sticky;top:0;z-index:50;display:flex;flex-direction:row!important;justify-content:flex-start!important;align-items:center;height:64px;width:100vw;margin-left:calc(50% - 50vw);padding:0 24px;margin-bottom:24px;background-color:rgba(13,20,36,.75)!important;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.image-7{width:auto!important;height:32px!important;min-width:0!important;max-width:none!important;object-fit:contain}
/* ---- headings + intro ---------------------------------------- */
.heading-4{color:#fff!important;font-family:'Space Grotesk',Inter,sans-serif!important;font-weight:700;letter-spacing:-1px;text-shadow:none!important;-webkit-text-stroke-width:0!important;font-size:40px;line-height:1.15}
.paragraph-7{color:#94a3b8!important;font-weight:400!important;font-size:17px}
.paragraph-7 a,.link-3{color:#22d3ee!important;text-decoration:none}
.headline-container-2{align-items:center!important}
.headline-container-2>a{color:#22d3ee;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;text-decoration:none;margin-bottom:8px}
.div-block-2{max-width:820px;width:100%}
/* ---- content card → glass w/ round-4 elevation ---------------- */
.div-block-23{background-image:none!important;background-color:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 24px 48px -12px rgba(0,0,0,.65),0 8px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:28px 32px!important}
/* ---- prose (rich text) — slate-300 on dark, AA everywhere ------ */
.div-block-23,.div-block-23 p,.div-block-23 li,.div-block-23 td{color:#cbd5e1!important;line-height:1.7}
.div-block-23 h1,.div-block-23 h2,.div-block-23 h3,.div-block-23 h4,.div-block-23 h5,.div-block-23 h6{color:#fff!important;font-family:'Space Grotesk',Inter,sans-serif!important;font-weight:700}
.div-block-23 h2{font-size:26px;margin-top:36px}
.div-block-23 h3{font-size:20px;margin-top:28px}
.div-block-23 a{color:#22d3ee!important;text-decoration:underline;text-decoration-color:rgba(34,211,238,.4);text-underline-offset:2px}
.div-block-23 a:hover{text-decoration-color:#22d3ee}
.div-block-23 strong{color:#e2e8f0}
.div-block-23 em{color:#cbd5e1}
.div-block-23 ul,.div-block-23 ol{padding-left:24px}
.div-block-23 li{margin-bottom:8px}
.div-block-23 blockquote{background-color:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-left:3px solid #22d3ee;border-radius:12px;margin:24px 0;padding:16px 20px;font-size:inherit;box-shadow:0 24px 48px -12px rgba(0,0,0,.65),0 8px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.div-block-23 img{max-width:100%;border-radius:12px}
.div-block-23 figure{margin:24px 0}
.div-block-23 figcaption{color:#94a3b8;font-size:13px}
.div-block-23 hr{border:none!important;border-top:1px solid rgba(255,255,255,.08)!important}
/* tables (glass) */
.div-block-23 table{border-collapse:collapse;width:100%;margin:20px 0;background-color:rgba(255,255,255,.03);border-radius:12px;overflow:hidden}
.div-block-23 th,.div-block-23 td{border:1px solid rgba(255,255,255,.08);padding:10px 12px;text-align:left}
.div-block-23 th{background-color:rgba(255,255,255,.08);color:#fff!important;font-family:'Space Grotesk',Inter,sans-serif;font-weight:600}
.div-block-23 tr:nth-child(even) td{background-color:rgba(255,255,255,.03)}
@media (max-width:767px){.div-block-23 table{display:block;overflow-x:auto}}
/* ---- savvy-score tier rows (classes added by page JS; copy untouched) */
.sf-tier-row{background-color:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-left:3px solid rgba(255,255,255,.3);border-radius:12px;padding:14px 18px!important;margin:10px 0;box-shadow:0 24px 48px -12px rgba(0,0,0,.65),0 8px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
/* ---- guides listing ------------------------------------------- */
.div-block-23 .w-dyn-list{width:100%}
.div-block-23 .w-dyn-items{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:20px;gap:20px}
/* v3 (2026-09-05) — the one line above has rendered 41px cards on desktop
since 2026-08-11. It grids a container whose children are Webflow's
.w-col-N PERCENTAGE-WIDTH FLOATS (.w-col{float:left;padding:0 10px} +
.w-col-3{width:25%}). display:grid makes the float a no-op but NOT the
width, which then resolves against the item's own 1fr TRACK instead of the
row it was written for. Measured in Chromium at 1440px before this fix:
track 244.6px -> .w-col-3 width:25% = 61.16px -> minus the column's 2x10px
padding = a 41.16px card, 1799px tall. A vertical sliver, 20 of them.
The grid itself is right; the column box inside it is what has to go. The
negative row margin goes with the padding it was cancelling. */
.div-block-23 .w-dyn-items > .w-dyn-item{width:auto;float:none;padding-left:0;padding-right:0}
.div-block-23 .w-dyn-items,.w-container .div-block-23 .w-dyn-items{margin-left:0;margin-right:0}
@media (max-width:991px){.div-block-23 .w-dyn-items{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.div-block-23 .w-dyn-items{grid-template-columns:1fr}}
.guide-card{background-color:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08);border-radius:16px!important;overflow:hidden;box-shadow:0 24px 48px -12px rgba(0,0,0,.65),0 8px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)!important;transition:transform .2s ease,background-color .2s ease}
.guide-card:hover{transform:translateY(-4px);background-color:rgba(255,255,255,.08)!important}
.guide-card-pad{color:#94a3b8!important;font-size:14px}
.guide-card h3{color:#fff!important;font-family:'Space Grotesk',Inter,sans-serif!important;font-size:18px;line-height:1.35}
/* ---- guide article template ----------------------------------- */
.div-block-2.guide-col{max-width:820px}
.div-block-23.guide-article{margin-right:auto}
.headline-container-2>img{width:100%;max-width:820px;border-radius:16px;margin-bottom:28px;box-shadow:0 24px 48px -12px rgba(0,0,0,.65),0 8px 16px rgba(0,0,0,.4)}
.guide-body{color:#cbd5e1;font-size:17px;line-height:1.7}
/* ---- contact form (style only — bindings untouched) ------------ */
.form-block-2{width:100%;max-width:560px;background-color:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px;box-shadow:0 24px 48px -12px rgba(0,0,0,.65),0 8px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.form-block-2 label{color:#cbd5e1;font-weight:500}
.form-block-2 .w-input,.form-block-2 .w-select,.form-block-2 textarea{background-color:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:10px;color:#fff!important;min-height:44px}
.form-block-2 .w-input::placeholder,.form-block-2 textarea::placeholder{color:#94a3b8}
.form-block-2 .w-input:focus,.form-block-2 .w-select:focus,.form-block-2 textarea:focus{border-color:#22d3ee!important;box-shadow:0 0 0 2px rgba(34,211,238,.35);outline:none}
.form-block-2 select option{background-color:#0d1424;color:#cbd5e1}
.form-block-2 input[type=submit],.form-block-2 .w-button{background-color:#22d3ee!important;background-image:none!important;color:#070b14!important;border:none;border-radius:9999px;font-weight:600;height:48px;padding:0 28px;box-shadow:0 0 40px rgba(34,211,238,.25);transition:background-color .2s ease;cursor:pointer}
.form-block-2 input[type=submit]:hover,.form-block-2 .w-button:hover{background-color:#67e8f9!important}
.w-form-done{background-color:rgba(52,211,153,.12)!important;border:1px solid rgba(52,211,153,.35);border-radius:12px;color:#6ee7b7!important}
.w-form-fail{background-color:rgba(244,63,94,.12)!important;border:1px solid rgba(244,63,94,.35);border-radius:12px;color:#fda4af!important}
/* ---- footer (shared component, restyled in place) -------------- */
.footer{position:relative;z-index:1;background-color:transparent}
.div-block-11{border-top:1px solid rgba(255,255,255,.08);padding-top:40px;padding-bottom:32px;background-color:rgba(7,11,20,.6)}
.paragraph-5,.paragraph-8{color:#94a3b8!important;text-shadow:none!important}
.link-2{color:#94a3b8!important;border-right-color:rgba(255,255,255,.15)!important;text-decoration:none;transition:color .2s ease}
.link-2:hover{color:#22d3ee!important}
.div-block-16 a{color:#94a3b8}
.div-block-16 svg{fill:currentColor}
/* ---- 404 / utility -------------------------------------------- */
.utility-page-wrap{background:transparent}
.utility-page-content{width:320px;padding:32px;background-color:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 24px 48px -12px rgba(0,0,0,.65),0 8px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.utility-page-content h2{color:#fff;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700}
.utility-page-content div{color:#94a3b8}
/* ---- a11y ------------------------------------------------------ */
a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid #22d3ee;outline-offset:2px;border-radius:6px}
/* ---- responsive ------------------------------------------------ */
@media (max-width:767px){
.heading-4{font-size:30px}
.div-block-2{max-width:100%}
.div-block-23{padding:20px!important}
.link-block-2{padding:0 16px}
}
/* ---- guide CTA card type fallback (font itself loads via page head) */
.sf-cta-title{font-family:'Space Grotesk',Inter,sans-serif}
/* ---- shared sf2 chrome (SF Nav component + rebuilt Footer component) ----
Layout lives in Webflow global styles (sf2-*); this block carries the
polish that previously existed only in the homepage embed. 2026-08-09. */
.sf2-nav{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sf2-nav-link:hover{color:#fff}
.sf2-btn:hover{background-color:#67e8f9}
.sf2-footer-link:hover{color:#22d3ee}
.sf2-social:hover{background-color:rgba(255,255,255,.08)}
.sf2-soc-fb{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M13.5 21v-7h2.4l.4-3h-2.8V9.1c0-.9.3-1.5 1.6-1.5h1.3V5c-.3 0-1.1-.1-2-.1-2 0-3.4 1.2-3.4 3.5V11H8.5v3H11v7h2.5z'/%3E%3C/svg%3E")}
.sf2-soc-ig{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%2394a3b8' stroke='none'/%3E%3C/svg%3E")}
.sf2-soc-tt{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M16.6 3c.4 2 1.7 3.3 3.9 3.5v2.8c-1.4.1-2.7-.3-3.9-1.1v5.9c0 3.8-2.6 6-5.9 6C7.6 20.1 5.5 18 5.5 15c0-3 2.5-5.3 5.9-5v3c-.3-.1-.7-.2-1-.2-1.5 0-2.6 1-2.6 2.4 0 1.5 1.1 2.4 2.5 2.4 1.6 0 2.7-1.1 2.7-3.3V3h3.6z'/%3E%3C/svg%3E")}
.sf2-nav-link:focus-visible,.sf2-btn:focus-visible,.sf2-footer-link:focus-visible,.sf2-social:focus-visible{outline:2px solid #22d3ee;outline-offset:2px;border-radius:6px}
/* ---- v2 (2026-08-11 sweep) --------------------------------------------
QW#5: hero h1 + sub ship inline opacity:0 from a Webflow IX2 fade on the
legal/contact set; content must not depend on JS to be visible.
!important beats the inline initial state — the fade is retired. */
h1.heading-4,p.paragraph-7{opacity:1!important}
/* ---- G4 · /guides compact index (2026-09-22) -----------------------------
§7 target: /guides docH < 8,000px @375. Measured as served 2026-09-22
08:35 AEST: 12,950px = 15.95 phone screens, of which the 20-card list is
11,386px — 87.9% of the page. The height is the card, not the page.
TWO RULES. Nothing is created, deleted, or moved: the ![]()
and the excerpt
stay in the DOM, stay in the CMS, and stay in the guide's own page. They
stop occupying layout on the INDEX. Reverting is deleting these two rules —
which is the reason this is CSS and not a Designer edit.
NO WEBFLOW WRITE AND NO PUBLISH. This file is served from
api.savvyflyer.com.au out of this repo, and already carries .guide-card
rules above. The §7 record classified G1-G4 as "Designer-only"; that was
wrong, and is corrected in the evidence doc.
MATCH SETS MEASURED ON THE SERVED PAGE, not assumed:
a.guide-card 20
img.guide-card-img 20 one per card
div.guide-card-pad 40 EXACTLY 2 per card — excerpt, then meta
h3.guide-card-pad 20 the title is an , so the div-scoped
selector below structurally cannot hit it
The excerpt is addressed BY POSITION, not by a class that prose could
reproduce: it is the first div child of the card. The meta row is the
second and is deliberately KEPT — an index without read-time and date is
worse than a long one. If Webflow ever adds a third div to this card the
selector moves silently, so the guard is the rendered height, re-measured. */
.guide-card-img{display:none!important}
.guide-card > div.guide-card-pad:nth-of-type(1){display:none!important}