/* ========================================================================== SKIN · DRIFT Backgrounds, gradients and shadows only. Deliberately NOT touched, so the site keeps the proportions and voice you already signed off: · no font-family, size, weight, letter-spacing or line-height change · no border-radius change · no padding, margin or any other spacing change · no position, z-index, display or overflow change That last line is not decoration. An earlier version of this file carried `.hdr,footer.site,main,section,.availbar{position:relative;z-index:1}` to lift content above the background field. It did that — and in the process turned the sticky header into a static one (breaking the mega menu, which needs the header's z-index:60) and turned the fixed bottom availability bar into an inline block that could never appear. The field is now painted at z-index:-1 instead, which needs nothing from the content at all. ========================================================================== */ :root{ /* --------------------------------------------------------------- grounds */ --bg:#F4F6FB; --bg-2:#EBEFF8; --bg-3:#E2E8F4; --line:#E1E6F2; --line-soft:#EAEEF7; /* ---------------------------------------------------------------- shadow Spread-based ambient, not drop. Small offset, wide blur, positive spread — the shape that reads as a card resting a few millimetres off the page rather than one thrown down a wall. Two layers: the tight one gives the edge its contact, the wide one gives the bloom. */ --sh-1:0 1px 2px rgba(12,19,48,.04), 0 2px 10px 2px rgba(12,19,48,.04); --sh-2:0 2px 4px rgba(12,19,48,.04), 0 6px 22px 3px rgba(12,19,48,.08), 0 2px 30px 12px rgba(12,19,48,.03); --sh-3:0 4px 10px rgba(12,19,48,.05), 0 16px 44px 8px rgba(12,19,48,.13); } /* the ground lives on so that body::before can sit at z-index:-1 between the canvas and the page content without touching either */ html{background:var(--bg)} body{background:transparent} /* --------------------------------------------------------------------------- The page has a light source: four very wide, very faint colour fields fixed behind everything, so scrolling drifts through them instead of running over flat white. z-index:-1 keeps it behind all content while needing no position or stacking change anywhere else. --------------------------------------------------------------------------- */ body::before{content:"";position:fixed;inset:-20vh -10vw;z-index:-1;pointer-events:none; filter:blur(90px);opacity:.85; background: radial-gradient(30% 26% at 12% 8%,rgba(0,18,181,.16),transparent 70%), radial-gradient(34% 28% at 88% 26%,rgba(0,200,183,.16),transparent 72%), radial-gradient(30% 26% at 20% 78%,rgba(255,147,30,.11),transparent 72%), radial-gradient(32% 26% at 84% 92%,rgba(107,87,232,.13),transparent 72%)} /* --------------------------------------------------------------------------- Cards rest at elevation instead of only lifting on hover. This is the whole point: before, every shadow in the stylesheet was on a :hover rule, so depth never existed on a phone or in a screenshot. --------------------------------------------------------------------------- */ /* The full list was found by sweeping every page for boxes that still drew a 1px hairline with no shadow — the leftovers from the old "boxes on white" model, which read as seams once the page stopped being white. */ .plan,.device,.checker,.sizer,.tbl,.tile,.tile.plain,.shout a,.ck-card, .benefits,.vs,.rail,.awards,.startrow a,.gwhero,.gw-ports,.joinbento, .pt-scroll,.cap,.plan-wide,.pt-wrap,.bbf-card,.prod,.st-card,.st-frame,.ab-stat,.ab-val,.stepnum li,.cov-loading, .deal,.hc,.scard,.step,.search-big,.addr,.split-tile,.szopts button, .stepper .ctrl{border-color:transparent;box-shadow:var(--sh-2)} /* every surface that used to rely on the page being white now says so */ .plan,.device,.checker,.sizer,.tile.plain,.shout a,.ck-card,.benefits,.vs, .startrow a,.gwhero,.gw-ports,.joinbento,.pt-scroll,.cap,.tbl,.rail, .awards,.plan-wide,.pt-wrap,.bbf-card,.prod,.deal,.hc,.scard,.st-card,.st-frame,.ab-stat,.ab-val,.stepnum li,.cov-loading, .step,.search-big,.addr,.szopts button,.stepper .ctrl{background:#fff} /* .split-tile comes in a light and a dark variant; only the light one is a white surface, and the dark one must keep its gradient */ .split-tile:not(.dark){background:#fff} /* These sit inside dark or already-tinted parents, where the page ground never shows through and the hairline is still doing real work. Left alone on purpose: .calc and .sv-card are translucent white on a dark section, .status is a mint state chip, .gw-specs uses its border colour as the grid gap between cells. */ /* same collision at rest: the base's `.plan.pop{border:1px solid var(--line)}` is (0,2,0) and outranked this file's borderless `.plan`, so Plus alone kept a faint hairline while the others had none. */ .plan.pop{box-shadow:var(--sh-3);border-color:transparent} .device:hover,.shout a:hover{border-color:transparent;box-shadow:var(--sh-3)} /* Plans keep the ink border on hover. This was already happening — but only on Plus, which is what made the row feel inconsistent. The base stylesheet carries both `.plan:hover` and `.plan.pop:hover{border-color:var(--ink)}`; this file's `.plan:hover` is (0,2,0) and beat the first but lost to `.plan.pop:hover` at (0,3,0), so the skin removed the border from every card except Plus. Both selectors are named here so all four behave alike. The 1px is already reserved by the resting transparent border, so nothing shifts on hover. */ .plan:hover,.plan.pop:hover{border-color:var(--ink);box-shadow:var(--sh-3)} .startrow a:hover{border-color:transparent;background:#fff;box-shadow:var(--sh-3)} .tile:hover{box-shadow:var(--sh-3)} .tile,.htile{box-shadow:var(--sh-2)} .seg,.billtoggle .seg{background:#fff;border-color:transparent;box-shadow:var(--sh-1)} .eyebrow{box-shadow:0 1px 2px rgba(12,19,48,.05)} /* the FAQ is a run of rules rather than a card; it keeps its hairlines and sits on the ground, exactly as it did before */ .faq{border-top-color:rgba(12,19,48,.10)} .faq details{border-bottom-color:rgba(12,19,48,.10)} /* a soft bloom sits behind the plan row and the bento grid, so the cards read as objects on a surface rather than shapes on a page */ .plans,.bento-c{position:relative} .plans::before,.bento-c::before{content:"";position:absolute;left:-24px;right:-24px;top:-10%;bottom:-10%; z-index:0;pointer-events:none;filter:blur(44px); background: radial-gradient(38% 50% at 50% 40%,rgba(0,18,181,.16),transparent 70%), radial-gradient(44% 44% at 12% 80%,rgba(0,200,183,.16),transparent 72%), radial-gradient(44% 44% at 90% 18%,rgba(255,147,30,.11),transparent 72%)} .plans > *,.bento-c > *{z-index:1} /* --------------------------------------------------------------------------- Tinted bands become frosted panels floating on the colour field rather than flat runs of grey. --------------------------------------------------------------------------- */ .sect.bg2{background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.9)} .sect.bg3{background:rgba(226,232,244,.55); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} /* --------------------------------------------------------------------------- Chrome. The header stays white — it is the one surface on the site that should never look tinted. --------------------------------------------------------------------------- */ .hdr{background:#fff;border-bottom:1px solid var(--line-soft)} .hdr.stuck{box-shadow:0 2px 20px 3px rgba(12,19,48,.08)} .mega{box-shadow:var(--sh-3)} .availbar{background:rgba(255,255,255,.97);box-shadow:0 -6px 26px rgba(12,19,48,.12)} footer.site{background:linear-gradient(165deg,#00072E,#101740)} /* buttons pick up a little contact shadow; geometry and type are untouched */ .btn{box-shadow:0 2px 6px rgba(12,19,48,.10)} .btn:hover{box-shadow:var(--sh-2)} .btn-ghost{box-shadow:inset 0 0 0 1.5px var(--ink)} .btn-glass{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)} /* inputs read as pressed rather than drawn */ .acheck input,.fld input,.fld select,.ck-promo input{border-color:transparent; background:#fff;box-shadow:var(--sh-1)} .acheck input:focus,.fld input:focus{box-shadow:0 0 0 3px rgba(0,18,181,.14),var(--sh-1);outline:none} /* photographic veils cool very slightly to match the ground */ .tile .veil{background:linear-gradient(180deg,rgba(12,19,48,.04) 0%,rgba(12,19,48,.48) 50%,rgba(12,19,48,.88) 100%)}