/* ============================================================================ CHASSIS — shared by Gulfshore Dockside and Paradise Fuel. Byte-identical in both deployments through round 2; round 3 (header, order sheet, fuel index, spoke pages) diverged this copy. It carries structure, type, space and motion. It carries NO brand colour: --accent and --accent-rgb are supplied by the brand stylesheet loaded after it. Token values extracted verbatim from the Gulfshore Dockside canvas export. ========================================================================= */ :root{ /* --- ground & ink (shared by both sites, per brief) ------------------- */ --ground: #0A0D12; --ground-alt: #0C1B2E; --ground-rgb: 10,13,18; --text: #F2F4F7; --text-rgb: 242,244,247; /* --- accent: overridden by the brand stylesheet ----------------------- */ --accent: #8FB4D9; --accent-rgb: 143,180,217; /* --- derived hairlines & borders -------------------------------------- */ --hairline: rgba(var(--accent-rgb),.14); /* section separators */ --rule-soft: rgba(var(--accent-rgb),.16); /* review card top rule */ --border-block: rgba(var(--accent-rgb),.2); /* bordered block */ --rule: rgba(var(--accent-rgb),.22); /* column kicker underline */ --field-line: rgba(var(--accent-rgb),.3); /* form underline */ --underline: rgba(var(--accent-rgb),.4); /* inline link underline */ --hdr-rule: rgba(var(--accent-rgb),.4); --strip-rule: rgba(var(--accent-rgb),.28); /* --- derived ink tints ------------------------------------------------ */ --text-lede: rgba(var(--text-rgb),.85); --text-dim: rgba(var(--text-rgb),.72); --text-dimmer: rgba(var(--text-rgb),.68); --text-footer: rgba(var(--text-rgb),.66); --text-meta: rgba(var(--text-rgb),.62); --text-label: rgba(var(--text-rgb),.6); --text-aside: rgba(var(--text-rgb),.55); --text-placeholder: rgba(var(--text-rgb),.52); --text-fine: rgba(var(--text-rgb),.52); /* --- CONTRAST REMEDIATION -------------------------------------------------- Three inherited Gulfshore values fell below WCAG and are now corrected: --field-line-a11y 1.81:1 -> 3.16:1 form input underlines --text-placeholder 3.54:1 -> 5.26:1 input placeholder text --text-fine 3.32:1 -> 5.26:1 footer fine print --field-line is left at .3 because it is only ever used to derive the a11y token; decorative hairlines have their own tokens above. */ --field-line-a11y: rgba(var(--accent-rgb),.55); /* --- type ------------------------------------------------------------- */ --font-display: 'Newsreader', Georgia, serif; --font-body: 'Public Sans', system-ui, sans-serif; --fs-h1: clamp(42px,8.4vw,106px); --fs-statement: clamp(32px,6.5vw,80px); --fs-h2-contact: clamp(32px,5.5vw,66px); --fs-h2-faq: clamp(30px,5.5vw,64px); --fs-h2-alt: clamp(30px,5.4vw,64px); --fs-h2: clamp(30px,5vw,60px); --fs-h2-map: clamp(32px,3.4vw,50px); --fs-rating: clamp(48px,8vw,76px); --fs-phone: clamp(30px,4.6vw,52px); --fs-pullquote: clamp(26px,4.4vw,52px); --fs-block-h: clamp(24px,3.2vw,40px); --fs-success-h: clamp(24px,3vw,34px); --fs-lede-serif: clamp(22px,2.8vw,32px); --fs-h3: clamp(21px,2.5vw,28px); --fs-dt: clamp(20px,2.6vw,28px); --fs-h4: clamp(18px,2vw,23px); --fs-list: clamp(18px,2.1vw,22px); --fs-body-lg: clamp(16px,2.1vw,19px); --fs-quote: clamp(16px,1.55vw,19px); --fs-body: clamp(15px,1.8vw,18px); --fs-body-alt: clamp(15px,1.7vw,17px); --fs-hdr-phone: clamp(18px,1.7vw,24px); --fs-hdr-nav: 15px; --hdr-h: 78px; /* under 80 at desktop, per the direction */ --fs-body-sm: 15px; --fs-body-xs: 14px; --fs-eyebrow: 12px; --fs-kicker: 11px; --fs-kicker-xs: 10.5px; --fs-fine: 12px; --ls-eyebrow: .26em; --ls-kicker: .24em; --ls-label: .2em; --ls-btn: .18em; --ls-attr: .16em; --ls-tight: -.015em; /* --- space ------------------------------------------------------------ */ --wrap: none; /* full-bleed sections, per the live site */ --wrap-narrow: 960px; --wrap-map: 1180px; --wrap-strip: 1040px; --measure: 680px; --pad-section: clamp(64px,10vw,140px); --pad-contact: clamp(64px,10vw,150px); --gutter: clamp(20px,5vw,64px); --gap-col: clamp(28px,4vw,56px); --gap-wide: clamp(44px,6vw,88px); --head-gap: clamp(48px,7vw,80px); /* --- motion ----------------------------------------------------------- */ --ease-settle: cubic-bezier(0.16,0.84,0.28,1); --dur-reveal: .7s; --dur-settle: 1.4s; } /* --------------------------------------------------------------------------- Base. UA margin is cleared once, at zero specificity, scoped to the exact elements that need it — never blanket-reset, never `margin:0` on a class. ------------------------------------------------------------------------ */ *,*::before,*::after{ box-sizing:border-box; } /* color-scheme: the surfaces we do not draw (scrollbars on the order sheet, the native select popup, the textarea grip) take the dark UA set instead of Windows' light default on a navy panel. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:dark; } body{ margin:0; background:var(--ground); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; } :where(h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol){ margin-block:0; margin-inline:0; } :where(ul,ol){ padding-inline-start:0; list-style:none; } a{ color:var(--accent); text-decoration:none; } a:hover{ color:var(--text); } img{ display:block; } ::selection{ background:var(--accent); color:var(--ground); } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } input,select,textarea,button{ font-family:inherit; } input::placeholder,textarea::placeholder{ color:var(--text-placeholder); } .vh{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* --- motion primitives ---------------------------------------------------- */ [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-reveal) ease-out, transform var(--dur-reveal) ease-out; } [data-reveal].is-in{ opacity:1; transform:none; } [data-img]{ transform:scale(1.06); transition:transform var(--dur-settle) var(--ease-settle); } [data-img].is-in{ transform:scale(1); } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } [data-reveal],[data-img]{ opacity:1; transform:none; transition:none; } } /* --- layout --------------------------------------------------------------- */ .sec{ background:var(--ground); border-top:1px solid var(--hairline); } .sec--alt{ background:var(--ground-alt); } .sec--seam{ border-top:0; } .sec--rel{ position:relative; } .wrap{ max-width:var(--wrap); margin-inline:auto; padding:var(--pad-section) var(--gutter); } .wrap--narrow{ max-width:var(--wrap-narrow); } .wrap--contact{ padding-block:var(--pad-contact); } .measure{ max-width:var(--measure); } /* --- type ----------------------------------------------------------------- */ .eyebrow{ font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:20px; } .eyebrow--wide{ margin-bottom:24px; } .kicker--gap{ margin-bottom:20px; } .kicker--gap-lg{ margin-bottom:24px; } .kicker{ font-size:var(--fs-kicker); letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--accent); font-weight:500; } .kicker--rule{ display:block; padding-bottom:18px; border-bottom:1px solid var(--rule); margin-bottom:22px; } .kicker--rule-tight{ padding-bottom:16px; margin-bottom:20px; } .h1{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h1); line-height:1; letter-spacing:var(--ls-tight); text-wrap:balance; } .h2{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.01em; text-wrap:balance; } .h2--alt{ font-size:var(--fs-h2-alt); line-height:1.06; letter-spacing:var(--ls-tight); } .h2--faq{ font-size:var(--fs-h2-faq); line-height:1.04; letter-spacing:var(--ls-tight); } .h2--contact{ font-size:var(--fs-h2-contact); line-height:1.02; letter-spacing:var(--ls-tight); } .statement{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-statement); line-height:1.02; letter-spacing:var(--ls-tight); } .h3{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h3); } .h4{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h4); } .lede{ font-size:var(--fs-body-lg); line-height:1.55; color:var(--text-lede); font-weight:300; } .body{ font-size:var(--fs-body); line-height:1.62; color:var(--text-dim); font-weight:300; } .body--sm{ font-size:var(--fs-body-sm); line-height:1.6; color:var(--text-dimmer); font-weight:300; } .body--xs{ font-size:var(--fs-body-xs); line-height:1.58; color:var(--text-dimmer); font-weight:300; } .body--aside{ font-size:var(--fs-body-xs); letter-spacing:.02em; color:var(--text-aside); font-weight:300; } .attr{ font-size:var(--fs-fine); letter-spacing:var(--ls-attr); text-transform:uppercase; color:var(--accent); } .attr--lg{ font-size:13px; letter-spacing:var(--ls-btn); } /* --- header ----------------------------------------------------------------- [logo] Fuels Reviews ............ [ Fuel now ] | (239) 272-2458 One line, under 80px at desktop, fixed with the blur. The mark sits at 72px, the legibility floor: the lockup carries a wordmark AND a tagline inside a 2.1:1 oval, so the name is only ~8% of the artwork height, and at 48px it read as a smudge. The direction's diagram says 88, but 88 cannot sit inside a bar under 80px, and the height is the binding number. */ .hdr{ position:fixed; inset:0 0 auto; z-index:50; height:var(--hdr-h); display:flex; align-items:center; justify-content:flex-start; gap:clamp(24px,3.4vw,52px); padding:0 var(--gutter); /* Flat translucent bar, not a fade: the gradient went clear behind the 72px mark and the photo drowned the logo; .82 read as a solid black band. Ground at .6 over a 10px blur keeps the photo showing through while the mark still sits on a darker surface (Devon, round 4). */ background:rgba(var(--ground-rgb),.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* The mark is the company's own logo, reversed for a dark ground by tools/logo-reverse.js. line-height:0 keeps the anchor the image's height. */ .hdr__mark{ display:block; line-height:0; } .hdr__mark img{ display:block; width:auto; height:72px; } .hdr__nav{ display:flex; gap:clamp(18px,2.2vw,32px); font-size:var(--fs-hdr-nav); letter-spacing:.02em; font-weight:400; } .hdr__nav a{ display:inline-block; color:var(--text-dim); padding-block:4px; border-bottom:1px solid transparent; transition:color .25s ease-out, border-color .25s ease-out; } .hdr__nav a:hover{ color:var(--text); } .hdr__nav a:active{ transform:translateY(1px); } .hdr__nav a[aria-current="page"]{ color:var(--text); border-bottom-color:var(--accent); } .hdr__actions{ margin-left:auto; display:flex; align-items:center; } /* The house button, filled. Square: .btn is radius 0 and so is this. */ .hdr__fuel{ padding:12px 20px; background:var(--accent); color:var(--ground); font-size:12px; letter-spacing:var(--ls-btn); text-transform:uppercase; font-weight:500; white-space:nowrap; line-height:1.2; transition:background .3s, transform .15s ease-out; } .hdr__fuel:hover{ background:var(--text); color:var(--ground); } .hdr__fuel:active{ transform:translateY(1px); } /* An accent ring on an accent fill is invisible; the ring goes inside, in ground. */ .hdr__fuel:focus-visible{ outline-color:var(--ground); outline-offset:-4px; } .hdr__rule{ width:1px; height:24px; margin-inline:28px; background:var(--hdr-rule); } /* The number alone. The eyebrow that used to sit inside it moved to the button. */ .hdr__phone{ display:flex; align-items:center; color:var(--text); font-size:var(--fs-hdr-phone); font-weight:500; letter-spacing:.02em; white-space:nowrap; transition:transform .15s ease-out; } .hdr__phone:hover{ color:var(--text); } .hdr__phone:active{ transform:translateY(1px); } /* Text button that opens the nav panel. Desktop never shows it. */ .hdr__menu{ display:none; background:none; border:0; padding:6px 0; cursor:pointer; color:var(--accent); font-size:var(--fs-hdr-nav); letter-spacing:.02em; font-weight:500; transition:color .25s ease-out, transform .15s ease-out; } .hdr__menu:hover{ color:var(--text); } .hdr__menu:active{ transform:translateY(1px); } @media (max-width:899px){ :root{ --hdr-h:74px; } .hdr{ gap:16px; } .hdr__nav,.hdr__fuel{ display:none; } .hdr__mark img{ height:50px; } .hdr__menu{ display:inline-block; } .hdr__rule{ height:18px; margin-inline:16px; } .hdr__phone{ font-size:18px; } } @media (max-width:480px){ .hdr__phone{ font-size:16px; } .hdr__rule{ height:16px; margin-inline:12px; } } @media (max-width:340px){ :root{ --hdr-h:66px; } .hdr{ gap:12px; } .hdr__mark img{ height:42px; } .hdr__phone{ font-size:15px; } .hdr__rule{ margin-inline:10px; } } @media (prefers-reduced-motion:reduce){ .hdr__nav a,.hdr__fuel,.hdr__menu,.hdr__phone{ transition:none; } } /* --- hero ----------------------------------------------------------------- */ .hero{ position:relative; min-height:100svh; display:grid; grid-template-rows:1fr auto; overflow:hidden; background:var(--ground); } .hero__media{ position:absolute; inset:0; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 52%; } /* A light fade only, bottom-heavy under the copy (Devon, round 4). */ .hero__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,13,18,.62) 0%, rgba(10,13,18,.28) 38%, rgba(10,13,18,0) 68%); } .hero__body{ position:relative; max-width:1040px; padding:0 var(--gutter) clamp(52px,9vh,104px); } .hero__eyebrow{ margin-bottom:22px; text-shadow:0 1px 16px rgba(var(--ground-rgb),.9); } .hero__h1{ text-shadow:0 2px 40px rgba(var(--ground-rgb),.6); } .hero__lede{ margin-top:26px; max-width:540px; } /* Landscape desktops: the hero takes the photo's own aspect (2400x1412) so the whole frame shows uncropped, copy over the asphalt at the bottom. Portrait viewports (phones, tall desktop windows) keep 100svh cover, the copy over the image, exactly as the vertical desktop reads (Devon, round 4). */ @media (orientation:landscape) and (min-width:768px){ .hero{ min-height:calc(100vw * 1412 / 2400); } /* Shallower block: the shorter hero would otherwise lift the copy onto the tankers. */ .hero__body{ padding-bottom:clamp(28px,3.5vw,48px); } .hero__eyebrow{ margin-bottom:14px; } .hero__lede{ margin-top:16px; } } /* --- credibility strip ----------------------------------------------------- Rating left, facts right, a hairline standing between them, at every width (Devon, round 4). Below 800 the facts stack right-aligned and the link is allowed to wrap; the rating keeps its baseline row. */ .strip{ max-width:var(--wrap-strip); margin-inline:auto; padding:clamp(40px,6vw,72px) var(--gutter); display:flex; flex-direction:row; align-items:center; justify-content:space-between; text-align:left; gap:clamp(20px,4vw,60px); } .strip__rating{ display:flex; align-items:baseline; gap:16px; flex:1 1 0; } .strip__num{ font-family:var(--font-display); font-size:var(--fs-rating); font-weight:400; line-height:1; } .strip__meta{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; text-align:left; } .strip__stars{ color:var(--accent); font-size:18px; letter-spacing:.12em; } .strip__link{ font-size:13px; letter-spacing:var(--ls-attr); text-transform:uppercase; color:var(--text-meta); font-weight:400; /* text-decoration, not border-bottom: a border draws under the element box, so a wrapped link trailed a full-width rule past its short second line. This follows each line of text and needs no nowrap. */ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:var(--field-line-a11y); transition:color .25s ease-out, text-decoration-color .25s ease-out; } .strip__link:hover,.strip__link:focus-visible{ color:var(--text); text-decoration-color:var(--accent); } .strip__link:active{ transform:translateY(1px); } .strip__ext{ margin-left:.5em; } /* Both zones flex equally so the hairline lands on the row's centre line. */ .strip__hr{ flex:0 0 auto; align-self:stretch; width:1px; background:var(--strip-rule); margin-block:clamp(2px,.8vw,8px); } .strip__facts{ flex:1 1 0; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:10px; font-size:var(--fs-body-xs); letter-spacing:.04em; color:var(--text-lede); font-weight:400; } @media (min-width:800px){ .strip__facts{ flex-direction:row; flex-wrap:wrap; justify-content:flex-end; gap:12px 34px; } /* Each fact stays whole; wrapping mid-phrase stranded 'service' on its own right-aligned line at 768. */ .strip__facts span{ white-space:nowrap; } } @media (prefers-reduced-motion:reduce){ .strip__link,.cta-line a{ transition:none; } } /* --- full-bleed photo bands ----------------------------------------------- */ .band{ position:relative; height:clamp(320px,58vh,600px); overflow:hidden; } .band--tall{ height:clamp(360px,66vh,680px); } /* A figure at its own aspect inside the wrap, not a band. The fuel block is closed by a photograph that is whole — a cropped sliver of the same fleet read as a cut-off picture rather than as a designed rule. */ .fuels__shot{ overflow:hidden; margin-block:clamp(40px,5vw,64px) clamp(56px,8vw,96px); } .fuels__shot img{ width:100%; height:auto; } /* The crew photograph is the warmth on this page. Full bleed, own aspect, no crop: a fixed-height band cuts the heads off and the faces are the whole point of the picture. */ .crewshot{ overflow:hidden; } .crewshot img{ width:100%; height:auto; } .band img{ width:100%; height:100%; object-fit:cover; } .band__scrim{ position:absolute; inset:0; } /* --- services ------------------------------------------------------------- */ .sechead{ margin-inline:auto; margin-bottom:var(--head-gap); max-width:min(68%,780px); text-align:center; } .sechead--right{ margin-inline-start:auto; margin-bottom:var(--head-gap); max-width:900px; text-align:right; } /* --- the fuel index ---------------------------------------------------------- Three fuels, straight on, one full-width row each. The rules are the device: 1px in --text at full opacity under every row and over the first, the only white rules on the page; every other hairline is accent-tinted. Each rule is a pseudo-element so it can draw in from the left on reveal; at rest it is indistinguishable from a border. The wrapper carries data-reveal only as the trigger; the motion belongs to the rules and the row contents, so the wrapper's own fade is switched off. */ .fuelindex{ list-style:none; padding:0; } .fuelindex[data-reveal]{ opacity:1; transform:none; transition:none; } .fuelrow{ position:relative; display:grid; align-items:start; grid-template-columns:auto minmax(0,1fr); column-gap:16px; padding-block:clamp(28px,4vw,48px); } .fuelrow::before,.fuelrow::after{ content:""; position:absolute; left:0; right:0; height:1px; background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-settle); } .fuelrow::before{ top:0; display:none; } .fuelrow::after{ bottom:0; } .fuelrow:first-child::before{ display:block; } .fuelindex.is-in .fuelrow::before,.fuelindex.is-in .fuelrow::after{ transform:scaleX(1); } /* The contents follow their rule in: the rule arrives, then the words. */ .fuelrow > *{ opacity:0; transform:translateY(10px); transition:opacity var(--dur-reveal) ease-out, transform var(--dur-reveal) ease-out; } .fuelindex.is-in .fuelrow > *{ opacity:1; transform:none; } .fuelrow:nth-child(2)::after{ transition-delay:.12s; } .fuelrow:nth-child(3)::after{ transition-delay:.24s; } .fuelrow:nth-child(1) > *{ transition-delay:.15s; } .fuelrow:nth-child(2) > *{ transition-delay:.27s; } .fuelrow:nth-child(3) > *{ transition-delay:.39s; } /* The number leads at the name's cap height. Measured, not guessed: at line-height 1 both faces put their cap top 1px under the line box, so the two top-aligned boxes already share a cap line and no offset is needed. */ .fuelrow__n{ font-size:13px; letter-spacing:.08em; line-height:1; color:var(--text-dim); font-weight:400; } .fuelrow__name{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h2); line-height:1; letter-spacing:var(--ls-tight); } .fuelrow__body{ grid-column:1 / -1; margin-top:18px; } .fuelrow__kicker{ font-size:16px; line-height:1.5; color:var(--text-dim); font-weight:400; } .fuelrow__p{ margin-top:12px; max-width:46ch; font-size:var(--fs-body-alt); line-height:1.62; color:var(--text-dim); font-weight:300; } /* Written as a descendant so it outranks .cta-line's own margin, which is declared later in the file at the same specificity. */ .fuelrow > .fuelrow__go{ grid-column:1 / -1; margin-top:18px; font-size:16px; line-height:1.5; } .fuelrow__go > a{ line-height:1.5; } .fuelindex__note{ padding-top:clamp(22px,2.6vw,32px); font-size:var(--fs-body-alt); letter-spacing:.02em; color:var(--text-aside); font-weight:300; } @media (min-width:900px){ .fuelrow{ grid-template-columns:56px minmax(0,5fr) minmax(0,6fr) auto; column-gap:40px; padding-block:48px; } .fuelrow__body,.fuelrow > .fuelrow__go{ grid-column:auto; margin-top:0; } /* Same size and leading as the kicker, top-aligned, so the two share a baseline. */ .fuelrow > .fuelrow__go{ justify-self:end; } } @media (prefers-reduced-motion:reduce){ .fuelrow::before,.fuelrow::after{ transform:none; transition:none; } .fuelrow > *{ opacity:1; transform:none; transition:none; } } /* --- section closer --------------------------------------------------------- One text line, no box: the form link in accent, the phone as the quiet alternative. Underline arrives on hover, the strip-link idiom. */ .cta-line{ margin-top:clamp(32px,4vw,52px); font-size:var(--fs-body); font-weight:500; } .cta-line > a{ display:inline-block; color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:transparent; transition:color .25s ease-out, text-decoration-color .25s ease-out; } .cta-line > a:hover,.cta-line > a:focus-visible{ color:var(--text); text-decoration-color:var(--accent); } .cta-line > a:active{ transform:translateY(1px); } .cta-line__alt{ margin-left:.5em; font-size:var(--fs-body-sm); font-weight:300; color:var(--text-meta); } .cta-line__alt a{ color:var(--text-lede); border-bottom:1px solid var(--underline); } .cta-line__alt a:hover{ color:var(--text); border-bottom-color:var(--accent); } /* A "more" line is a .cta-line that reads on, not a button; it sits above the section's Fuel now closer with a short gap so the pair reads as one list. One accent line per closer: the read-on link sits a notch quieter. */ .cta-line--more{ margin-top:clamp(24px,3vw,36px); } .cta-line--more + .cta-line{ margin-top:14px; } .cta-line--more > a{ color:var(--text-lede); } .cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(32px,6vw,88px); margin-bottom:var(--head-gap); } .list{ display:grid; gap:14px; font-family:var(--font-display); font-size:var(--fs-list); font-weight:400; } .block{ padding:clamp(36px,4.5vw,60px) clamp(28px,4vw,48px); background:var(--ground-alt); border:1px solid var(--border-block); text-align:center; } .block__h{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-block-h); line-height:1.1; margin-bottom:20px; } .block__p{ margin-inline:auto; max-width:620px; font-size:var(--fs-body-alt); line-height:1.62; color:var(--text-dim); font-weight:300; } /* --- coverage map --------------------------------------------------------- */ .coverage{ background:var(--ground-alt); padding:104px 40px; } .coverage__inner{ max-width:var(--wrap-map); margin-inline:auto; display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:72px; align-items:center; } /* The coastline path data runs outside the 0 0 620 860 viewBox. Without an explicit clip those strokes paint past the element box and widen the whole document, which is why the original page had a horizontal scroll at every width. Clipping here is what keeps scrollWidth equal to the viewport. */ .coverage__map{ width:100%; height:auto; max-height:660px; overflow:hidden; } .coverage__h2{ font-family:var(--font-display); font-weight:400; color:var(--text); font-size:var(--fs-h2-map); line-height:1.12; margin-bottom:28px; } .coverage__p{ color:#C4D0DE; font-size:17px; line-height:1.65; margin-bottom:18px; max-width:46ch; } @media (max-width:900px){ .coverage{ padding:72px 22px; } .coverage__inner{ grid-template-columns:1fr; gap:44px; } .coverage__map{ max-height:none; } } /* --- steps ---------------------------------------------------------------- */ .statement--center{ margin-inline:auto; margin-bottom:var(--head-gap); max-width:var(--wrap-narrow); text-align:center; } .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:var(--gap-col); } .steps__h3{ margin-bottom:10px; } /* --- versus the fuel dock --------------------------------------------------- A comparison table: six decisions the customer is already making, answered twice. The Gulfshore column is lifted onto the alternate ground and bounded by hairlines so it reads as the answer without shouting; the fuel-dock column stays deliberately dim. Under 820px the table stacks — axis, their answer, then ours on its own bordered card. */ .compare__head{ margin-bottom:var(--head-gap); max-width:860px; } .compare{ width:100%; border-collapse:collapse; table-layout:fixed; text-align:left; } .compare__col{ font-family:var(--font-body); font-size:var(--fs-kicker); font-weight:500; letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--text-label); padding:0 clamp(18px,2.2vw,32px) 16px; border-bottom:1px solid var(--rule); vertical-align:bottom; } .compare__col:nth-child(1){ width:20%; padding-left:0; } .compare__col:nth-child(2){ width:40%; } .compare__col--us{ width:40%; color:var(--accent); background:var(--ground-alt); border-left:1px solid var(--rule); border-right:1px solid var(--rule); padding-top:clamp(18px,2vw,26px); } .compare__axis{ padding:clamp(24px,2.8vw,36px) clamp(18px,2.2vw,32px) clamp(24px,2.8vw,36px) 0; font-family:var(--font-display); font-weight:400; font-size:var(--fs-h4); line-height:1.15; letter-spacing:var(--ls-tight); color:var(--text); vertical-align:baseline; border-bottom:1px solid var(--hairline); } .compare__them,.compare__us{ padding:clamp(24px,2.8vw,36px) clamp(18px,2.2vw,32px); font-size:var(--fs-body-alt); line-height:1.62; font-weight:300; vertical-align:baseline; border-bottom:1px solid var(--hairline); } .compare__them{ color:var(--text-meta); } .compare__us{ color:var(--text); background:var(--ground-alt); border-left:1px solid var(--rule); border-right:1px solid var(--rule); } .compare__label{ display:none; } @media (max-width:820px){ .compare,.compare tbody,.compare tr,.compare th,.compare td{ display:block; width:auto; } .compare thead{ display:none; } .compare tr{ padding-block:clamp(26px,6vw,34px); border-top:1px solid var(--hairline); } .compare tbody tr:last-child{ border-bottom:1px solid var(--hairline); } .compare__axis{ padding:0 0 18px; border-bottom:0; font-size:var(--fs-h3); } .compare__them{ padding:0 0 20px; border-bottom:0; } .compare__us{ padding:clamp(18px,4vw,24px) clamp(18px,4vw,24px); border:1px solid var(--rule); border-bottom:1px solid var(--rule); } .compare__label{ display:block; margin-bottom:8px; font-family:var(--font-body); font-size:var(--fs-kicker); font-weight:500; letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--text-label); } .compare__label--us{ color:var(--accent); } } /* --- about ---------------------------------------------------------------- */ .split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(32px,5vw,72px); align-items:center; } .split__img{ overflow:hidden; } .split__img img{ width:100%; height:clamp(400px,62vh,640px); object-fit:cover; object-position:center 42%; } .serif-lede{ font-family:var(--font-display); font-weight:300; font-size:var(--fs-lede-serif); line-height:1.34; letter-spacing:-.005em; margin-bottom:24px; } /* --- testimonials --------------------------------------------------------- */ .pull{ margin-inline:auto; margin-bottom:clamp(56px,8vw,90px); max-width:var(--wrap-narrow); text-align:center; } .pull blockquote{ font-family:var(--font-display); font-weight:300; font-size:var(--fs-pullquote); line-height:1.22; letter-spacing:-.012em; text-wrap:balance; } .pull figcaption{ margin-top:28px; } /* the driver sits on the pull-quote's measure, at his own aspect — no forced band height, so nothing of the cab or the door lettering is cropped away */ .mid-fig{ overflow:hidden; margin-inline:auto; margin-bottom:var(--head-gap); max-width:var(--wrap-narrow); } .mid-fig img{ width:100%; height:auto; } /* Set at half width so it reads as a supporting photograph under the pull-quote rather than a second hero. Own aspect, so the face is whole. */ .mid-fig--sm{ max-width:480px; } .reviews{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(28px,3.5vw,40px) clamp(32px,4vw,56px); } @media (min-width:1180px){ .reviews{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .review{ display:flex; flex-direction:column; padding-top:clamp(22px,2.6vw,30px); border-top:1px solid var(--rule-soft); } .review blockquote{ font-family:var(--font-display); font-weight:300; font-size:var(--fs-quote); line-height:1.46; } .review figcaption{ margin-top:auto; padding-top:20px; } /* --- FAQ (typographic dl — matches the Gulfshore pattern) ----------------- */ .faq__h2{ margin-bottom:clamp(40px,6vw,64px); text-align:center; } .qa{ padding-block:clamp(26px,3.5vw,38px); border-top:1px solid var(--hairline); } .qa:last-child{ border-bottom:1px solid var(--hairline); } .qa dt{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-dt); line-height:1.18; margin-bottom:14px; } .qa dd{ font-size:var(--fs-body); line-height:1.62; color:var(--text-dim); font-weight:300; max-width:var(--measure); } /* --- contact -------------------------------------------------------------- */ .contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:var(--gap-wide); } .contact__h2{ margin-bottom:32px; } .phone-lg{ display:inline-flex; align-items:baseline; color:var(--text); font-family:var(--font-display); font-weight:400; font-size:var(--fs-phone); letter-spacing:-.01em; border-bottom:1px solid var(--underline); padding-bottom:6px; transition:border-color .3s ease; } .phone-lg:hover{ border-bottom-color:var(--accent); color:var(--text); } .contact__meta{ margin-top:36px; display:grid; gap:6px; font-size:var(--fs-body-sm); line-height:1.6; color:var(--text-dim); font-weight:300; } .contact__meta span:last-child{ color:var(--text-meta); } .contact__fig{ overflow:hidden; margin-top:40px; } .contact__fig img{ width:100%; height:clamp(260px,40vh,420px); object-fit:cover; object-position:center 52%; } /* --- form ----------------------------------------------------------------- */ .form{ display:grid; gap:20px; } .form[hidden]{ display:none; } .field{ display:grid; gap:9px; min-width:0; } .field > span{ font-size:var(--fs-kicker); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-label); } /* min-width:0 is load-bearing: without it a