/* ============================================================================ BRAND — Paradise Fuel. Direction B, "The Door". Loaded after chassis.css, which supplies structure, type, space and motion and no brand colour at all. THE ONE IDEA THIS FILE IMPLEMENTS --------------------------------- Paradise Fuel was bought by Gulfshore Dockside. The page demonstrates that rather than asserting it: above the photograph of tanker 3's door the accent is Paradise's own sunset gold; at the door it changes to Gulfshore's blue and stays there to the end of the page. The site changes hands where the photograph proves the business did. Because of that, this file has exactly three jobs: 1 the header plate — the only place the spectrum is ever loud 2 the accent handoff — .pf-gd re-declares the accent and its derivatives 3 four small components chassis.css does not carry --ground and --ground-alt are deliberately NOT overridden. Paradise sits on the exact Gulfshore chassis surface, #0A0D12 over #0C1B2E. ========================================================================= */ :root{ /* --- accent above the door: hibiscus gold, sampled off the mark --------- 12.1:1 on --ground, 10.8:1 on --ground-alt. */ --accent: #FFC400; --accent-rgb: 255,196,0; /* --- the three values chassis.css stages but holds at the inherited Gulfshore numbers. Adopted here so chassis stays byte-shared. --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-a11y: rgba(var(--accent-rgb),.55); --text-placeholder: rgba(var(--text-rgb),.52); --text-fine: rgba(var(--text-rgb),.52); /* Native select, date picker and scrollbar follow the page, not the OS. */ color-scheme: dark; /* --- the header sky ---------------------------------------------------- Resampled off the artwork one row at a time. Percentages are against the 380px natural height of paradise-plate.webp: the last opaque sky row is 252, which is 66.32%, and the plate is keyed transparent below it. The stops carry on from that exact colour into the ground, so the horizon is a fade rather than a cut. This gradient is the ONLY saturated colour on the page. Nothing below the plate draws from it — not a rule, not a dot, not a numeral. */ --pf-band: linear-gradient(180deg, #420FD0 0%, #332FCC 3.19%, #264DCC 6.31%, #146BC8 9.50%, #0A8AC7 12.63%, #08A2BE 15.82%, #31A69E 18.94%, #5FAD7D 22.13%, #8DB159 25.26%, #BCB833 28.45%, #EFBE0A 31.57%, #FFB600 34.76%, #FEA500 37.88%, #FF9000 41.07%, #FD7D00 44.20%, #FF6D00 47.39%, #FE4600 50.51%, #FF1400 53.70%, #D40F00 55.26%, #E34B00 56.84%, #E57F01 58.42%, #C79206 60.00%, #5E8C5E 61.58%, #0989A6 63.16%, #0E5EB3 64.74%, #1B36B9 66.05%, #0A0D12 72%, #0A0D12 100%); } /* =========================================================================== 1 · THE PLATE — the company's own header artwork, the one thing returning customers recognise instantly. It is rebuilt so it stays sharp at any width and sits on the near-black ground instead of dragging its original royal blue along with it. The artwork is centred at native 1275px and the sky behind it is the CSS gradient above, so past 1275px the sky continues instead of upscaling. ======================================================================== */ .pf-plate{ position:relative; display:grid; place-items:center; background:var(--pf-band); background-size:100% 100%; } .pf-plate img{ position:relative; width:100%; max-width:1275px; height:auto; /* Outside the artwork the band is a flat vertical gradient identical to the CSS behind it, so the outer 14% either side is redundant. Fading it kills the compression seam without touching a macaw: the birds start at 19.6%. */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); } @media (max-width:1275px){ .pf-plate img{ -webkit-mask-image:none; mask-image:none; } } /* At phone widths the artwork's own 3.36:1 ratio shrinks it to ~112px tall and the script becomes unreadable — the one mark a returning customer is meant to recognise before reading a word. Cropping in gets it back: at 375px this is 165px tall, so the artwork is drawn 553px wide and 89px is trimmed off each side. The macaws start 19.6% in (250px of 1275) and the trim reaches 205px, so both birds survive the crop with room to spare. */ @media (max-width:600px){ .pf-plate img{ height:clamp(130px,44vw,180px); object-fit:cover; } } /* =========================================================================== 2 · THE HANDOFF — everything from the door section down runs on Gulfshore's accent instead of Paradise's. chassis.css derives its hairlines and field lines from --accent-rgb on :root, and a custom property is substituted where it is DECLARED, not where it is used. Re-declaring --accent-rgb on a subtree therefore does nothing to an inherited --hairline. Every derived token that appears below the door has to be re-declared here alongside it. These eight are the complete set; the rest of chassis's derivations (--rule-soft, --strip-rule) belong to sections this page does not have. ======================================================================== */ .pf-gd{ --accent: #8FB4D9; --accent-rgb: 143,180,217; --hairline: rgba(var(--accent-rgb),.14); --border-block: rgba(var(--accent-rgb),.2); --rule: rgba(var(--accent-rgb),.22); --field-line: rgba(var(--accent-rgb),.3); --underline: rgba(var(--accent-rgb),.4); --field-line-a11y: rgba(var(--accent-rgb),.55); } /* =========================================================================== 3 · THE DOOR — the evidence, full-bleed and unobstructed. No scrim and no type over this photograph. The decal is the entire argument of the page: the Paradise Fuel ribbon still on the door, and directly under it "Gulfshore Dockside, LLC. / Naples, FL / 239-272-2458". Anything laid over it costs legibility on the one image that cannot afford to lose any. Art-directed rather than object-fit cropped: a 1.73:1 frame carrying driver and decal at desktop, a 0.91:1 frame that pushes the decal larger at phone widths. The keeps height:auto so neither crop is re-cropped by CSS. ======================================================================== */ .pf-door{ display:block; width:100%; overflow:hidden; } .pf-door img{ width:100%; height:auto; } .pf-door__cap{ display:block; max-width:var(--wrap); margin-inline:auto; padding:clamp(18px,2.4vw,26px) var(--gutter) 0; font-size:var(--fs-kicker); letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--accent); font-weight:500; } /* =========================================================================== 4 · THE FIVE GRADES — a delivery list, not a card grid. Hairline rows, the index in the margin, the specification hard right. One row is a fuel; no row is a card. ======================================================================== */ .pf-grades{ border-top:1px solid var(--hairline); } .pf-grade{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:clamp(14px,3vw,32px); padding:clamp(20px,2.8vw,32px) 0; border-bottom:1px solid var(--hairline); } .pf-grade__i{ font-size:var(--fs-kicker-xs); letter-spacing:var(--ls-label); font-weight:600; font-variant-numeric:tabular-nums; color:var(--accent); } .pf-grade__n{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-feature-h3); line-height:1.05; letter-spacing:var(--ls-tight); } .pf-grade__d{ font-size:var(--fs-body-xs); line-height:1.5; color:var(--text-dim); font-weight:300; text-align:right; white-space:nowrap; } @media (max-width:700px){ .pf-grade{ grid-template-columns:auto 1fr; } .pf-grade__d{ grid-column:2; text-align:left; margin-top:6px; white-space:normal; } } /* =========================================================================== 5 · SMALL COMPONENTS ======================================================================== */ /* Hero sits under the plate rather than owning the whole viewport, so it is shorter than the chassis default and the plate is never scrolled past before the photograph beneath it has been seen. */ .pf-hero{ min-height:clamp(460px,72svh,760px); } /* --- the hero scrim ------------------------------------------------------ Tuned against a luminance map of this exact frame, not copied from Gulfshore. That hero is golden-hour and dark; this aerial is bright grass, open water and white tankers, with a band of water reflection running straight through where the eyebrow sits. Every number below was measured, not eyed. PHONE — one gradient, bottom-up, and steep. The type spans the full width at this size, so there is no right-hand side of the photograph to protect; a left-to-right scrim just releases before the eyebrow ends, which is what left it at 1.88:1. The photo stays open across the top third and goes dark under the type. At 375px the aerial is a texture rather than a readable photograph anyway, and legibility is the thing this page is for. */ .pf-hero .hero__scrim{ background:linear-gradient(to bottom, rgba(10,13,18,.58) 0%, rgba(10,13,18,.24) 14%, rgba(10,13,18,.80) 34%, rgba(10,13,18,.91) 58%, rgba(10,13,18,.97) 100%); } /* DESKTOP — directional. There is a right-hand side worth keeping here: the crew and the fleet. Dark hard on the left where the type is, released past 68% so the photograph survives as a photograph. */ @media (min-width:768px){ .pf-hero .hero__scrim{ background: linear-gradient(to right, rgba(10,13,18,.86) 0%, rgba(10,13,18,.62) 40%, rgba(10,13,18,.24) 68%, rgba(10,13,18,.05) 88%), linear-gradient(to bottom, rgba(10,13,18,.60) 0%, rgba(10,13,18,.16) 22%, rgba(10,13,18,.46) 52%, rgba(10,13,18,.78) 76%, rgba(10,13,18,.95) 100%); } } /* chassis sizes the H1 for Gulfshore's full-viewport hero. In a 648px hero under a plate, 106px over two lines is 212px of type and it shoves the whole block up into the bright water band in the photograph behind it — the reason the eyebrow measured 1.67:1 before this. Smaller face, block sits lower, type lands on the dark asphalt. The size is a contrast fix as much as a visual one. */ .pf-hero .hero__h1{ font-size:clamp(38px,6.6vw,80px); } /* The page carries no fixed navigation bar — the plate is the masthead and there is nowhere else to go — so the hero has to hold the phone number itself. chassis supplies .btn; the solid variant is the primary of the two. */ .pf-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,4vw,42px); } .btn--solid{ background:var(--accent); color:var(--ground); font-weight:600; } .btn--solid:hover{ background:transparent; color:var(--accent); } /* Ordering terms: definition rows, not cards, not a stat band. */ .pf-terms{ display:grid; gap:clamp(18px,2.4vw,26px); } .pf-terms div{ padding-top:clamp(16px,2vw,20px); border-top:1px solid var(--hairline); } .pf-terms dt{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h4); line-height:1.2; margin-bottom:6px; } .pf-terms dd{ font-size:var(--fs-body-sm); line-height:1.6; color:var(--text-dim); font-weight:300; } .pf-form-2col{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:20px; } .pf-foot__lines{ display:grid; gap:8px; font-size:var(--fs-body-xs); line-height:1.6; color:var(--text-footer); font-weight:300; } /* The sticky action bar is 56px of content plus a 1px top border plus the safe- area inset — 57px measured. 72px clears it and leaves the copyright line a gap to breathe in. Lives here rather than in chassis.css because that file is shared byte-for-byte with Gulfshore. */ @media (max-width:767px){ body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); } }