/*============================================================================== VELTRIX · HOMEPAGE SKIN — the `marketing` surface only backend/static/home.css · loaded by templates/index.html, ALWAYS LAST (after the page's own Gutenberg CSS, after overflow-fix.css, after theme.css) ------------------------------------------------------------------------------ WHY THIS FILE EXISTS `templates/index.html` is a saved WordPress page: it carries ~3 000 lines of Gutenberg CSS of its own and is repainted by `theme.css` (the colour system). Neither of them touches *form*: the page still wears the theme's flat panels, 8px corners and WordPress button chrome. This file is the third layer and it only ever moves pixels — not one word, link or block of the markup changes. It cannot leak into another page: every rule is rooted in `:root[data-surface="marketing"]`, the flag set by `templates/index.html` alone (404/admin/app pages keep their own surface). ------------------------------------------------------------------------------ HOW IT IS PUT TOGETHER 1. tokens — the glass / hairline / depth system, per theme 2. canvas — page wash, type ramp, selection 3. presets — the WordPress *gradient presets* are retuned rather than overridden. Every panel, card and button paints itself from `--wp--preset--gradient--gradient-N`, so re-declaring those values repaints the whole page with no `!important` war — the same trick theme.css uses for colour. 4. dark ink — light theme keeps the dark decorative panels (theme.css section 7 does the same for the brand gradients), so the ink presets are re-pointed to light ink *inside* those panels. Without this, light mode paints dark headings on a dark panel and half the page disappears. 5. header — the in-cover header becomes a floating glass bar. The theme's jQuery-sticky plugin writes inline `position/top/width`; ours are `!important`, so the bar keeps its own geometry in both page states while the plugin's wrapper still reserves the space the header used to take. 6. hero — glow pass, type scale, measure 7. sections — rhythm, kickers, the numbered steps 8. cards — the task-category tiles become glass 9. choice — "why choose us" tiles + the photo frame 10. faq — the Q/A pairs become question rows 11. buttons — pills; the theme's white-on-hover flip is replaced by a brand-consistent state (that theme rule is `!important`) 12. footer — links, social strips, the small print 13. consent — the cookie box is part of the page, so it is glass too 14. small screens ==============================================================================*/ /*============================================================================== 1 · TOKENS One glass system for the whole page. The panels stay dark in both themes (they are the brand's decorative gradients), so the glass itself barely changes between them — only the page wash and the ink inside the panels do. ==============================================================================*/ :root[data-surface="marketing"]{ color-scheme:dark; /* geometry -------------------------------------------------------------*/ --home-shell:1400px; /* the header bar's rail */ --home-radius:22px; /* cards, panels */ --home-radius-sm:14px; /* rows, chips */ --home-pill:999px; /* buttons */ /* glass ----------------------------------------------------------------*/ --home-glass:rgba(255,255,255,.055); --home-glass-2:rgba(255,255,255,.10); --home-glass-bar:rgba(9,13,32,.62); --home-hair:rgba(255,255,255,.13); --home-hair-2:rgba(255,255,255,.07); --home-blur:blur(18px) saturate(160%); /* depth ----------------------------------------------------------------*/ --home-shadow:0 26px 60px -34px rgba(0,0,0,.90); --home-shadow-lift:0 38px 84px -36px rgba(0,0,0,.95); --home-ring:0 0 0 1px rgba(122,240,255,.20); /* the two brand accents in one place: the glass rings and hover states need them before a --wp-- preset is in scope */ --home-accent:#7af0ff; --home-accent-2:#1b5cff; } /* Light mode: the panels keep their dark gradients, so only the page wash and the translucent glass lighten up. */ :root[data-surface="marketing"][data-theme="light"]{ color-scheme:light; --home-glass:rgba(255,255,255,.07); --home-glass-2:rgba(255,255,255,.12); --home-glass-bar:rgba(12,17,38,.66); --home-hair:rgba(255,255,255,.16); --home-hair-2:rgba(255,255,255,.09); --home-shadow:0 26px 60px -36px rgba(2,6,23,.55); --home-shadow-lift:0 38px 84px -38px rgba(2,6,23,.60); } /*============================================================================== 2 · CANVAS The page wash lives on (never : theme.css section 4 explains why) and is fixed, so the sections scroll over a still, deep gradient. ==============================================================================*/ :root[data-surface="marketing"] body.home{ font-family:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Roboto, "Helvetica Neue",Arial,sans-serif; background-color:var(--wp--preset--color--body-background); background-image: radial-gradient(1100px 620px at 12% -6%, rgba(27,92,255,.20), transparent 62%), radial-gradient(900px 520px at 92% 2%, rgba(122,240,255,.11), transparent 60%), radial-gradient(1200px 800px at 50% 112%, rgba(27,92,255,.15), transparent 66%); background-repeat:no-repeat; background-attachment:fixed; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } :root[data-surface="marketing"][data-theme="light"] body.home{ background-image: radial-gradient(1100px 620px at 12% -6%, rgba(37,99,235,.11), transparent 62%), radial-gradient(900px 520px at 92% 2%, rgba(14,116,144,.09), transparent 60%); } /* Headings: tighter tracking, balanced wrapping. The family is inherited, so a blocked webfont still falls back to the stack set on . */ :root[data-surface="marketing"] :is(h1,h2,h3,h4,h5,h6).wp-block-heading{ font-family:inherit; letter-spacing:-.022em; text-wrap:balance; } :root[data-surface="marketing"] .wp-block-paragraph{ letter-spacing:-.002em; text-wrap:pretty; } :root[data-surface="marketing"] ::selection{ background:rgba(122,240,255,.28); color:#04101f; } /*============================================================================== 3 · GRADIENT PRESETS — retuned, not overridden `index.html` paints every panel/button with `background: var(...) !important`, so overriding those rules would be an `!important` war. Re-declaring the preset itself is enough: theme.css leaves gradients alone in both themes, which keeps the two themes in step here too. ==============================================================================*/ :root[data-surface="marketing"]{ /* deep section panels --------------------------------------------------*/ --wp--preset--gradient--gradient-1: radial-gradient(120% 100% at 16% -12%, #15224f 0%, #0a1130 44%, #05070f 100%); --wp--preset--gradient--gradient-6: linear-gradient(180deg, #070a1b 0%, #04060f 100%); /* cards and the footer strips: a sheen over the panel, not another fill */ --wp--preset--gradient--gradient-4: radial-gradient(120% 90% at 100% 0%, rgba(122,240,255,.16), transparent 58%), linear-gradient(158deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 48%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #101c46 0%, #08122b 100%); /* buttons: the primary keeps the brand run, the secondary becomes glass */ --wp--preset--gradient--gradient-2: linear-gradient(135deg, #1b5cff 0%, #2f9df0 52%, #7af0ff 100%); --wp--preset--gradient--gradient-3: linear-gradient(140deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 55%, rgba(122,240,255,.14) 100%); } /*============================================================================== 4 · DARK INK INSIDE THE DARK PANELS (light theme only) theme.css section 7 turns the *presets* into dark ink for light mode, which is right for a light page but wrong for these panels: they stay dark gradients, so their headings and labels vanished. Re-pointing the ink presets inside the panels keeps the decorative gradients and makes the type readable again — the same variable remap theme.css already uses, one level deeper. ==============================================================================*/ :root[data-surface="marketing"][data-theme="light"] body.home :is(.wp-block-cover, [class*="gradient-1-gradient-background"], [class*="gradient-4-gradient-background"], [class*="gradient-6-gradient-background"]){ --wp--preset--color--base-2:#ffffff; --wp--preset--color--base:#f3f7ff; --wp--preset--color--custom-text:#d5def6; --wp--preset--color--custom-secondary:#7af0ff; --wp--preset--color--custom-primary:#4d8bff; --wp--preset--color--contrast:#f3f7ff; --wp--preset--color--contrast-2:#aab8d8; --wp--preset--color--contrast-3:#8494b8; } /*============================================================================== 5 · FLOATING GLASS HEADER The header is the first child of the hero's cover block, which is why it can simply float: the sticky plugin's wrapper still reserves its old space, and `!important` keeps our geometry whatever inline styles the plugin writes. ==============================================================================*/ :root[data-surface="marketing"] #sticky-header{ position:fixed !important; top:12px !important; left:50% !important; right:auto !important; bottom:auto !important; width:min(var(--home-shell),calc(100% - 24px)) !important; transform:translateX(-50%) !important; margin:0 !important; padding:10px clamp(14px,1.5vw,22px) !important; z-index:850 !important; border:1px solid var(--home-hair); border-radius:var(--home-radius-sm); background:var(--home-glass-bar) !important; -webkit-backdrop-filter:var(--home-blur); backdrop-filter:var(--home-blur); box-shadow:0 24px 50px -32px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07); transition:background .3s ease, box-shadow .3s ease; } /* The bar is a rail: the brand rides its left end, the buttons its right — the top-right corner belongs to JOIN NOW / Login, which take it over on small screens too (section 14). This surface ships no theme control of its own: index.html sets `data-theme-dock="off"`, so theme.js never injects the floating one here. */ :root[data-surface="marketing"] #sticky-header > .wp-block-group{ align-items:center; gap:12px; flex-wrap:wrap; } :root[data-surface="marketing"] #sticky-header .wp-block-site-logo img{ width:44px !important; height:44px !important; border-radius:13px !important; object-fit:cover; border:1px solid rgba(255,255,255,.16); box-shadow:0 10px 22px -12px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.18); } /* The theme already gradient-clips this wordmark — keep it, just set the type. */ :root[data-surface="marketing"] #sticky-header .wp-block-site-title, :root[data-surface="marketing"] #sticky-header .wp-block-site-title a{ font-size:clamp(16px,.75rem + .5vw,20px) !important; font-weight:800; letter-spacing:.005em; line-height:1.1; } :root[data-surface="marketing"] #sticky-header .wp-block-button__link{ padding:10px 18px !important; font-size:13.5px !important; } /* The floating theme control is deliberately absent on this surface: the bar's top-right corner belongs to JOIN NOW / Login, which move into it on small screens (section 14), and the markup opts out of the dock with `data-theme-dock="off"`. */ /*============================================================================== 6 · HERO The banner image the page points at (`/assets/images/banner.jpeg`) is not in the repo, so the hero is built to look deliberate with or without it: the cover's own gradient plus two CSS passes — a brand glow and a masked grid. ==============================================================================*/ :root[data-surface="marketing"] .featured-banner{ min-height:clamp(600px,84vh,820px) !important; overflow:hidden; isolation:isolate; } :root[data-surface="marketing"] .featured-banner::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background: radial-gradient(680px 420px at 20% 30%, rgba(27,92,255,.32), transparent 62%), radial-gradient(540px 360px at 84% 20%, rgba(122,240,255,.17), transparent 60%), radial-gradient(900px 620px at 50% 118%, rgba(27,92,255,.24), transparent 62%); } :root[data-surface="marketing"] .featured-banner::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(72% 62% at 50% 26%, #000 0%, transparent 78%); mask-image:radial-gradient(72% 62% at 50% 26%, #000 0%, transparent 78%); } :root[data-surface="marketing"] .featured-banner .wp-block-cover__inner-container{ position:relative; z-index:3; } /* Hero type: a large, tight measure. */ :root[data-surface="marketing"] .featured-banner h2.wp-block-heading{ line-height:1.12 !important; letter-spacing:-.032em !important; } :root[data-surface="marketing"] .featured-banner > .wp-block-cover__inner-container p.wp-block-paragraph{ max-width:64ch; margin-left:auto; margin-right:auto; } /*============================================================================== 7 · SECTION RHYTHM, KICKERS, THE NUMBERED STEPS ==============================================================================*/ /* One vertical key for every band. The hero keeps its own height, and the footer keeps the padding of the cover inside it (its own padding would show the page wash through and draw a seam). */ :root[data-surface="marketing"] .wp-site-blocks > :is(main,.wp-block-group){ padding-top:clamp(72px,8vw,124px) !important; padding-bottom:clamp(72px,8vw,124px) !important; position:relative; } /* A hairline where one band meets the next. */ :root[data-surface="marketing"] .wp-site-blocks > :is(main,.wp-block-group) + :is(main,.wp-block-group,footer.wp-block-template-part){ box-shadow:inset 0 1px 0 var(--home-hair-2); } /* Kickers — the four eyebrow lines ("How it works", "Services", "Why Choose Us", "Help Center / FAQ"). The colour still comes from the preset, so light mode keeps its own accent. */ :root[data-surface="marketing"] h4.wp-block-heading.has-custom-secondary-color{ text-transform:uppercase; letter-spacing:.18em; font-weight:600; font-size:clamp(11px,.64rem + .2vw,12.5px) !important; line-height:1.5; } /* The rule before the words rides the text flow, not a flex row: the eyebrow contains a , so a flex container would tear it into three items and break the line oddly on a phone. */ :root[data-surface="marketing"] h4.wp-block-heading.has-custom-secondary-color::before{ content:""; display:inline-block; width:26px; height:1px; margin-right:12px; vertical-align:.35em; background:currentColor; opacity:.55; } /* Long-form copy never runs the full 1380px rail. */ :root[data-surface="marketing"] main :is(p.wp-block-paragraph,h4.wp-block-heading){ max-width:78ch; } /* The five numbered capabilities become a lit checklist in one glass panel. */ :root[data-surface="marketing"] main .wp-block-column:has(> h4.wp-block-heading:not(.has-custom-secondary-color)){ background:var(--home-glass); border:1px solid var(--home-hair-2); border-radius:26px; padding:clamp(24px,3vw,44px) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--home-shadow); } :root[data-surface="marketing"] main h4.wp-block-heading:not(.has-custom-secondary-color){ position:relative; padding-left:32px; margin-top:clamp(22px,2.6vw,34px) !important; margin-bottom:6px !important; font-size:clamp(17px,.95rem + .5vw,21px) !important; line-height:1.35; } :root[data-surface="marketing"] main h4.wp-block-heading:not(.has-custom-secondary-color)::before{ content:""; position:absolute; left:3px; top:.5em; width:11px; height:11px; border-radius:50%; background:linear-gradient(140deg,var(--home-accent),var(--home-accent-2)); box-shadow:0 0 0 5px rgba(122,240,255,.10), 0 0 20px rgba(122,240,255,.35); } :root[data-surface="marketing"] main h4.wp-block-heading:not(.has-custom-secondary-color) + p.wp-block-paragraph{ padding-left:32px; margin-top:0 !important; color:var(--wp--preset--color--custom-text); } /*============================================================================== 8 · TASK-CATEGORY CARDS The tiles already carry `has-hover-effect has-border-color` plus an 8px inline radius and a #636363 hairline — all of it inline, so the corner and the edge have to be re-stated with `!important`. The sheen itself comes from the retuned `gradient-4` preset; this section only adds glass, depth and motion. ==============================================================================*/ :root[data-surface="marketing"] .wp-block-group.has-hover-effect{ height:100%; display:flex; flex-direction:column; border:1px solid var(--home-hair) !important; border-radius:var(--home-radius) !important; padding:clamp(22px,2.4vw,32px) !important; box-shadow:var(--home-shadow); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .5s ease; } :root[data-surface="marketing"] .wp-block-group.has-hover-effect:hover{ transform:translateY(-6px); border-color:rgba(122,240,255,.34) !important; box-shadow:var(--home-shadow-lift), var(--home-ring), 0 30px 70px -40px rgba(27,92,255,.85); } /* The icon sits in a glass tile; the arrow is already a circled glyph, so it just gets depth and a nudge instead of a second circle. */ :root[data-surface="marketing"] .wp-block-group.has-hover-effect > figure.wp-block-image.is-style-default{ width:78px; height:78px; margin:0 auto clamp(14px,1.4vw,20px); display:grid; place-items:center; border:1px solid var(--home-hair); border-radius:20px; background:radial-gradient(120% 120% at 28% 18%, rgba(122,240,255,.18), rgba(255,255,255,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); } :root[data-surface="marketing"] .wp-block-group.has-hover-effect > figure.wp-block-image.is-style-default img{ width:40px !important; height:40px !important; object-fit:contain; } :root[data-surface="marketing"] .wp-block-group.has-hover-effect > figure.wp-block-image:not(.is-style-default){ width:46px; margin:auto auto 0 !important; transition:transform .45s cubic-bezier(.22,1,.36,1); } :root[data-surface="marketing"] .wp-block-group.has-hover-effect > figure.wp-block-image:not(.is-style-default) img{ width:46px !important; filter:drop-shadow(0 0 14px rgba(122,240,255,.30)); } :root[data-surface="marketing"] .wp-block-group.has-hover-effect:hover > figure.wp-block-image:not(.is-style-default){ transform:translateY(-3px) scale(1.04); } :root[data-surface="marketing"] .wp-block-group.has-hover-effect h2.wp-block-heading{ letter-spacing:-.02em; line-height:1.25; } /*============================================================================== 9 · "WHY CHOOSE US" TILES + THE PHOTO FRAME The four selling points are ``s with an inline left border only; they become glass rows with a lit left edge. The photo column is a cover block with a 3px white border inline — it becomes a framed panel instead. ==============================================================================*/ :root[data-surface="marketing"] .wp-block-group[style*="border-left-width"]{ border:1px solid var(--home-hair-2) !important; border-left:2px solid rgba(122,240,255,.55) !important; border-radius:0 var(--home-radius-sm) var(--home-radius-sm) 0 !important; background:linear-gradient(90deg, rgba(122,240,255,.07), rgba(255,255,255,.02) 45%, transparent) !important; padding:clamp(16px,1.5vw,20px) clamp(18px,1.8vw,24px) !important; transition:border-color .4s ease, background .4s ease, transform .4s ease; } :root[data-surface="marketing"] .wp-block-group[style*="border-left-width"]:hover{ border-left-color:var(--home-accent) !important; transform:translateX(4px); } :root[data-surface="marketing"] .wp-block-cover.has-hover-effect{ border:1px solid var(--home-hair) !important; border-radius:clamp(18px,2vw,28px) !important; min-height:clamp(380px,44vw,600px) !important; overflow:hidden; box-shadow:var(--home-shadow-lift); } /* The frame is calm: no lift, just a light ring on hover. */ :root[data-surface="marketing"] .wp-block-cover.has-hover-effect:hover{ transform:none; box-shadow:var(--home-shadow-lift), var(--home-ring); } :root[data-surface="marketing"] .wp-block-cover.has-hover-effect .wp-block-cover__image-background{ filter:saturate(1.04) contrast(1.02); } /*============================================================================== 10 · FAQ Eight question/answer pairs packed as `h5 + p` siblings: the questions become glass rows and the answers hang under them, so the block reads as a list of cards without a single line of markup changing. ==============================================================================*/ :root[data-surface="marketing"] .wp-block-group:has(> h5.wp-block-heading){ background:var(--home-glass); border:1px solid var(--home-hair-2); border-radius:26px; padding:clamp(24px,3vw,46px) clamp(22px,3vw,44px) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--home-shadow); } :root[data-surface="marketing"] h5.wp-block-heading{ margin:clamp(14px,1.6vw,20px) 0 0 !important; padding:clamp(12px,1.2vw,16px) clamp(16px,1.5vw,20px); border:1px solid var(--home-hair); border-radius:var(--home-radius-sm); background:var(--home-glass); font-size:clamp(15px,1.02vw,17px) !important; line-height:1.35; transition:border-color .35s ease, background .35s ease; } :root[data-surface="marketing"] h5.wp-block-heading:first-of-type{ margin-top:clamp(20px,2.2vw,30px) !important; } :root[data-surface="marketing"] h5.wp-block-heading:hover{ border-color:rgba(122,240,255,.30); background:var(--home-glass-2); } :root[data-surface="marketing"] h5.wp-block-heading + p.wp-block-paragraph{ margin:0 !important; padding:10px clamp(16px,1.5vw,20px) 0; max-width:80ch; color:var(--wp--preset--color--custom-text); } /*============================================================================== 11 · BUTTONS Two things have to be restated: the 6px radius the page sets inline, and the theme's `!important` hover flip to a white fill. The hover here stays on brand: the primary keeps its gradient run, the secondary brightens its glass. ==============================================================================*/ :root[data-surface="marketing"] .wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:var(--home-pill) !important; padding:clamp(12px,1.1vw,15px) clamp(20px,2vw,28px) !important; font-size:clamp(13.5px,.88rem + .12vw,15px) !important; font-weight:650; letter-spacing:.005em; line-height:1; white-space:nowrap; box-shadow:0 16px 34px -22px rgba(0,0,0,.95); transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, filter .3s ease, background .3s ease, border-color .3s ease; } :root[data-surface="marketing"] .wp-block-button__link:hover{ transform:translateY(-2px); } :root[data-surface="marketing"] .wp-block-button__link:active{ transform:translateY(0) scale(.99); } /* primary — the brand run */ :root[data-surface="marketing"] .wp-block-button__link.has-gradient-2-gradient-background{ background-image:var(--wp--preset--gradient--gradient-2) !important; color:#fff !important; box-shadow:0 18px 40px -24px rgba(27,92,255,1), inset 0 1px 0 rgba(255,255,255,.28); } :root[data-surface="marketing"] .wp-block-button__link.has-gradient-2-gradient-background:hover{ filter:brightness(1.08) saturate(1.06); box-shadow:0 26px 54px -26px rgba(27,92,255,1), inset 0 1px 0 rgba(255,255,255,.34); } /* secondary — glass */ :root[data-surface="marketing"] .wp-block-button__link.has-gradient-3-gradient-background{ border:1px solid var(--home-hair); color:#fff !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } :root[data-surface="marketing"] .wp-block-button__link.has-gradient-3-gradient-background:hover{ background:rgba(122,240,255,.16) !important; border-color:rgba(122,240,255,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 18px 40px -26px rgba(122,240,255,.85); } /* the arrow glyph inside the buttons */ :root[data-surface="marketing"] .wp-block-button__link img{ width:15px !important; max-width:15px; height:auto; margin:0 !important; transition:transform .3s ease, filter .3s ease; } :root[data-surface="marketing"] .wp-block-button__link:hover img{ transform:translateX(3px); filter:none !important; } :root[data-surface="marketing"] .wp-block-buttons{ gap:12px; } /*============================================================================== 12 · FOOTER The footer is a cover block: one hairline on top, its own padding, and glass for the three link columns, the e-mail rows, the two strips and the social pills. ==============================================================================*/ :root[data-surface="marketing"] footer.wp-block-template-part{ margin:0; } :root[data-surface="marketing"] footer .wp-block-cover{ border-top:1px solid var(--home-hair-2); padding-top:clamp(64px,7vw,104px) !important; padding-bottom:clamp(40px,4vw,60px) !important; } :root[data-surface="marketing"] footer ul.is-style-checkmark-list{ padding-left:1.1em; } :root[data-surface="marketing"] footer ul.is-style-checkmark-list li{ padding-inline-start:0; transition:transform .25s ease; } :root[data-surface="marketing"] footer ul.is-style-checkmark-list li:hover{ transform:translateX(3px); } :root[data-surface="marketing"] footer ul.is-style-checkmark-list li::marker{ color:var(--wp--preset--color--custom-secondary); font-size:.95em; } :root[data-surface="marketing"] footer ul.is-style-checkmark-list a{ text-decoration:none; transition:color .25s ease; } :root[data-surface="marketing"] footer ul.is-style-checkmark-list a:hover{ color:#fff !important; } /* the envelope glyphs next to the support addresses */ :root[data-surface="marketing"] footer .wp-block-image.size-full.is-resized img{ width:20px !important; height:20px !important; object-fit:contain; } /* the disclaimer strip and the social strip */ :root[data-surface="marketing"] footer .wp-block-group.has-gradient-4-gradient-background{ border:1px solid var(--home-hair-2); border-radius:18px !important; padding:clamp(14px,1.4vw,20px) clamp(16px,1.6vw,24px) !important; } /* social pills: the brand colours give way to glass, identity stays in the label */ :root[data-surface="marketing"] .wp-block-social-links .wp-social-link{ background-color:rgba(255,255,255,.07) !important; color:#e8eeff !important; border:1px solid var(--home-hair); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background-color .3s ease, border-color .3s ease, transform .3s ease; } :root[data-surface="marketing"] .wp-block-social-links .wp-social-link:hover{ background-color:rgba(122,240,255,.16) !important; border-color:rgba(122,240,255,.42); transform:translateY(-2px); } :root[data-surface="marketing"] .wp-block-social-links .wp-block-social-link-anchor, :root[data-surface="marketing"] .wp-block-social-links .wp-block-social-link-anchor svg{ color:inherit !important; fill:currentColor; } /*============================================================================== 13 · COOKIE NOTICE The plugin ships its own stylesheet and paints a white box bottom-left, which is the loudest thing on the page. It is still the same notice with the same buttons — only its surface joins the theme. ==============================================================================*/ :root[data-surface="marketing"] .cookieadmin_law_container .cookieadmin_consent_inside{ background:var(--home-glass-bar) !important; border:1px solid var(--home-hair) !important; border-radius:18px !important; -webkit-backdrop-filter:var(--home-blur); backdrop-filter:var(--home-blur); box-shadow:var(--home-shadow-lift) !important; } :root[data-surface="marketing"] .cookieadmin_law_container .cookieadmin_consent_inside :is(p,span,div,label,b,strong,a){ color:#e6ecff !important; } :root[data-surface="marketing"] .cookieadmin_law_container .cookieadmin_btn{ border-radius:var(--home-pill) !important; border:1px solid var(--home-hair) !important; background:var(--home-glass-2) !important; color:#fff !important; transition:background .3s ease, border-color .3s ease; } :root[data-surface="marketing"] .cookieadmin_law_container .cookieadmin_btn:hover{ background:rgba(122,240,255,.18) !important; border-color:rgba(122,240,255,.42) !important; } :root[data-surface="marketing"] .cookieadmin_law_container .cookieadmin_accept_btn{ background-image:var(--wp--preset--gradient--gradient-2) !important; border-color:transparent !important; } /* the preferences dialog the plugin opens on "Customize" */ :root[data-surface="marketing"] .cookieadmin_cookie_modal{ background:rgba(8,11,26,.96) !important; border:1px solid var(--home-hair) !important; border-radius:18px !important; box-shadow:var(--home-shadow-lift) !important; } :root[data-surface="marketing"] .cookieadmin_cookie_modal :is(h1,h2,h3,h4,label,p,span,div){ color:#e6ecff !important; } :root[data-surface="marketing"] .cookieadmin_re_consent{ background:var(--home-glass-bar) !important; border:1px solid var(--home-hair) !important; border-radius:var(--home-pill) !important; box-shadow:var(--home-shadow) !important; } /*============================================================================== 14 · SMALL SCREENS The bar has to survive three widths: a full rail beside the copy (desktop), a narrower rail (tablet), and a compact one — brand left, JOIN NOW / Login in the top-right corner the theme control would have held — on phones. From 860px down the bar stops wrapping, so it keeps a single row all the way to 320px; from there the plugin's wrapper is zeroed, so the hero's clearance is the same whether or not the plugin ran. ==============================================================================*/ @media (max-width:1200px){ :root[data-surface="marketing"] #sticky-header .wp-block-button__link{ padding:9px 16px !important; } } @media (max-width:1000px){ :root[data-surface="marketing"] #sticky-header{ top:8px !important; width:calc(100% - 16px) !important; } } @media (max-width:860px){ /* One row: the brand on the left, the buttons on the right — the corner the theme control used to hold on this surface. */ :root[data-surface="marketing"] #sticky-header > .wp-block-group{ justify-content:space-between !important; flex-wrap:nowrap !important; gap:10px; } /* the brand gives up width first, the buttons keep their natural size */ :root[data-surface="marketing"] #sticky-header > .wp-block-group > .wp-block-group:first-child{ min-width:0; } :root[data-surface="marketing"] #sticky-header > .wp-block-group > .wp-block-group:last-child{ flex:0 0 auto; } :root[data-surface="marketing"] #sticky-header .wp-block-site-title{ white-space:nowrap; } :root[data-surface="marketing"] .featured-banner .sticky-wrapper{ height:0 !important; } :root[data-surface="marketing"] .featured-banner .wp-block-cover__inner-container{ padding-top:150px !important; } :root[data-surface="marketing"] .featured-banner .wp-block-cover__inner-container > .wp-block-group:not(#sticky-header){ padding-top:0 !important; } } @media (max-width:640px){ :root[data-surface="marketing"] .wp-site-blocks > :is(main,.wp-block-group){ padding-top:56px !important; padding-bottom:56px !important; } :root[data-surface="marketing"] .featured-banner{ min-height:auto !important; } :root[data-surface="marketing"] .featured-banner .wp-block-cover__inner-container{ padding-top:140px !important; } :root[data-surface="marketing"] #sticky-header .wp-block-site-logo img{ width:38px !important; height:38px !important; border-radius:11px !important; } :root[data-surface="marketing"] #sticky-header .wp-block-site-title, :root[data-surface="marketing"] #sticky-header .wp-block-site-title a{ font-size:16px !important; } :root[data-surface="marketing"] main .wp-block-column:has(> h4.wp-block-heading:not(.has-custom-secondary-color)), :root[data-surface="marketing"] .wp-block-group:has(> h5.wp-block-heading){ border-radius:20px; padding:clamp(20px,5vw,32px) !important; } :root[data-surface="marketing"] .wp-block-group.has-hover-effect > figure.wp-block-image.is-style-default{ width:64px; height:64px; } :root[data-surface="marketing"] .wp-block-group.has-hover-effect > figure.wp-block-image.is-style-default img{ width:32px !important; height:32px !important; } :root[data-surface="marketing"] main h4.wp-block-heading:not(.has-custom-secondary-color), :root[data-surface="marketing"] main h4.wp-block-heading:not(.has-custom-secondary-color) + p.wp-block-paragraph{ padding-left:24px; } :root[data-surface="marketing"] main h4.wp-block-heading:not(.has-custom-secondary-color)::before{ left:0; width:9px; height:9px; } } @media (max-width:520px){ /* one button per row everywhere except inside the bar */ :root[data-surface="marketing"] .wp-block-buttons{ flex-direction:column; align-items:stretch; } :root[data-surface="marketing"] .wp-block-button, :root[data-surface="marketing"] .wp-block-button__link{ width:100%; } :root[data-surface="marketing"] #sticky-header .wp-block-buttons{ flex-direction:row; align-items:center; } :root[data-surface="marketing"] #sticky-header .wp-block-button, :root[data-surface="marketing"] #sticky-header .wp-block-button__link{ width:auto; } :root[data-surface="marketing"] #sticky-header .wp-block-button__link{ font-size:12.5px !important; padding:9px 14px !important; } :root[data-surface="marketing"] #sticky-header .wp-block-button__link img{ width:13px !important; } :root[data-surface="marketing"] .featured-banner .wp-block-cover__inner-container{ padding-top:134px !important; } } @media (max-width:420px){ /* Narrow phones: the brand and the buttons now share the bar's single row, so each side tightens up a little to keep the bar from overflowing down to 320px. The arrow glyphs go, the labels stay. */ :root[data-surface="marketing"] #sticky-header .wp-block-site-logo img{ width:34px !important; height:34px !important; border-radius:10px !important; } :root[data-surface="marketing"] #sticky-header .wp-block-site-title, :root[data-surface="marketing"] #sticky-header .wp-block-site-title a{ font-size:15px !important; } :root[data-surface="marketing"] #sticky-header > .wp-block-group{ gap:8px; } :root[data-surface="marketing"] #sticky-header .wp-block-buttons{ gap:6px; } :root[data-surface="marketing"] #sticky-header .wp-block-button__link{ font-size:11.5px !important; padding:8px 11px !important; } :root[data-surface="marketing"] #sticky-header .wp-block-button__link img{ display:none !important; } }