/* ========================================================================== Fruscio — Global stylesheet Loaded on every request. Home-only sections live in home.css. Source of truth for the visual language: design canvas `fruscio-home.html`. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS Prefixed `--fr-` so third-party plugin CSS (WooCommerce, accessibility widget, legacy Elementor output) can never shadow them. -------------------------------------------------------------------------- */ :root { /* HUMAN WARM. The palette of the "Human (warm)" direction in the Fruscio Sport design project. The brand triad carries over untouched; everything underneath it goes warm, and the dark stops being blue. Source colours, verbatim: navy #003366 · green #669933 · lime #CCCC00 cream #FFF8E7 · peach #FFD9B3 · sky #CFE3F0 ink #1A2B1A · coral #E86A4F · soft #F5EBD6 The source names three neutrals where the theme uses four, and ships no greys at all. Rather than collapse two surface roles onto one colour — which would flatten every section that alternates ground and card — the missing steps are derived from the ramp and marked as such below. Each one says where it came from, so the next person can tell what the client chose from what we worked out. Token names are left alone on purpose. `--fr-white` now holds a warm ivory and no longer deserves the name, but renaming it would mean rewriting four stylesheets for no change in behaviour. */ /* PALETTE 1 · LOGO, NAVY & MEADOW (trial). Only the two logo colours, on clean white grounds; the section tints are a wash of meadow and sky, the colours of the photography. The beige, peach and mustard of "Human (warm)" are gone. `--fr-lime` keeps its name but is now the light accent green: the highlight, eyebrow and button fill on dark grounds (7.2:1 with navy, 9.3:1 with ink). On light grounds the call to action is the deep green, see `.fr-btn--accent`. */ --fr-navy: #003366; --fr-green: #669933; --fr-lime: #A8D16A; /* The brand green is 3.4:1 on white: fine for fills, icons and display type, short of AA for text. The deep green clears 5.4:1 on every light ground and carries white at 6.4:1, so it is the text green, the fill of any green surface with copy on it and the call to action. */ --fr-green-deep: #3F6A1C; /* The dark is green-black, not blue-black. */ --fr-ink: #13241A; /* Surfaces, lightest to deepest: white, then neutrals with a breath of green. The names are kept from the earlier palette so no rule changes. */ --fr-white: #FFFFFF; --fr-paper: #F9FAF7; --fr-card: #F4F6F1; --fr-cream: #E9EEE4; /* Section tints: meadow (`sand`) and sky (`sage`). */ --fr-sand: #EBF2E1; --fr-sage: #E6EFF6; /* Text & lines: a blue-slate text, so body copy belongs to the navy. */ --fr-gray-700: #2A3744; --fr-gray-500: #56616B; --fr-line: rgba(0, 51, 102, .12); /* On-dark text: a barely green white. */ --fr-on-dark: #F3F7F0; --fr-on-dark-soft: rgba(243, 247, 240, .82); --fr-on-dark-mute: rgba(243, 247, 240, .64); --fr-on-dark-dim: rgba(243, 247, 240, .50); /* The source spends this on the secondary call to action. Nothing in the theme claims it yet; it is declared so the chip tones and the CTAs have somewhere to go when they need a colour that is neither lime nor navy. */ --fr-coral: #E86A4F; /* Typography */ --fr-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fr-label: var(--fr-font); /* the design sets label type in Inter, not a mono */ /* Layout */ --fr-maxw: 1320px; --fr-gutter: 20px; --fr-gap: 16px; /* The bar sits in the flow and pushes the hero down, so the hero has nothing to clear and the offset is zero. The measured height is still worth keeping: main.js writes it back onto , and `scroll-padding` needs it so an anchor never lands underneath the sticky bar. */ --fr-header-h: 115px; --fr-phero-offset: 0px; /* Radii */ --fr-r: 24px; --fr-r-sm: 16px; --fr-r-pill: 999px; /* Motion */ --fr-t: 280ms cubic-bezier(.2, .7, .3, 1); /* Stacking */ --fr-z-header: 200; /* Clears the GTranslate float (20px off the corner, 50px tall) and the accessibility button beside it. Back to 20px when GTranslate goes. */ --fr-totop-bottom: 84px; --fr-z-drawer: 500; } @media (min-width: 768px) { :root { --fr-gutter: 32px; } } /* -------------------------------------------------------------------------- 2. RESET & BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* The fixed header must not hide anchor targets. Measured, not guessed, so it follows the bar when the topbar is switched off. */ scroll-padding-top: calc(var(--fr-header-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--fr-font); font-size: 16px; line-height: 1.55; color: var(--fr-ink); background: var(--fr-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The line above has never painted anything, and it took a palette change to notice. Two other rules claim the page ground and both outrank it: WordPress compiles `theme.json` into `body { background-color: … }` at the same weight but later in the document, and Elementor's kit sets `.elementor-kit-750 { background-color: var(--e-global-color-primary) }` — a class, so heavier than any bare `body`, and last in the cascade. The site has been painted by Elementor's site settings the whole time. `:root body` is the lightest selector that outranks a single class, so the theme takes the ground back without an `!important` and without naming the kit by id, which would break the day somebody rebuilds it. When Elementor goes, this rule can collapse back into the block above. */ :root body { background-color: var(--fr-white); } body.fr-is-locked { overflow: hidden; } /* The footer sits at the bottom of the window on a short page (an empty account tab, a login form) instead of rising into its middle. Every template wraps its content in
, which takes the slack; the drawers and widgets are fixed and stay out of the flow. */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body > #main { flex: 1 0 auto; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: 1; letter-spacing: -.03em; } p, ul, ol, figure, blockquote, pre { margin: 0; } a { color: var(--fr-navy); text-decoration: none; transition: color var(--fr-t); } a:hover { color: var(--fr-green-deep); } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--fr-navy); outline-offset: 2px; border-radius: 4px; } /* Navy is the ring on the light grounds; on the dark and green ones it would vanish, so there the ring turns lime or cream. */ :where(.fr-topbar, .fr-footer, .fr-drawer, .fr-search-panel, .fr-phero, .fr-panel--navy, .fr-panel--ink, .fr-storie--ink, .fr-ctaband, .fr-statement, .fr-proto, .fr-numeri-band, .fr-partner--dark, .fr-gov__g--a, .fr-hubcard--dark, .fr-ecard--navy, .fr-gallery-band--ink) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--fr-lime); } :where(.fr-news, .fr-panel--green, .fr-gov__g--b) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--fr-white); } /* -------------------------------------------------------------------------- 3. LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .fr-wrap { max-width: var(--fr-maxw); margin-inline: auto; padding-inline: var(--fr-gutter); } .fr-section { padding-block: 34px; } .fr-section--flush { padding-block: 0; } .fr-tile { position: relative; border-radius: var(--fr-r); overflow: hidden; } /* Section header: title on the left, secondary action on the right. */ .fr-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; padding-inline: 4px; } .fr-sec-head h2 { font-size: clamp(30px, 4vw, 52px); color: var(--fr-navy); } .fr-sec-head h2 .fr-hl { color: var(--fr-green); } .fr-sec-head__sub { max-width: 640px; margin-top: 12px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; color: var(--fr-gray-700); } .fr-eyebrow { font-family: var(--fr-label); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fr-green-deep); } .fr-sec-head .fr-eyebrow { margin-bottom: 12px; } /* -------------------------------------------------------------------------- 4. BUTTONS -------------------------------------------------------------------------- */ /* Elementor writes its Site Settings > Buttons style as `.elementor-kit-750 button, … input[type="submit"], … .elementor-button`, and that stylesheet is enqueued after the theme's. A bare `.fr-btn` is one class — specificity (0,1,0) — while `.elementor-kit-750 button` is a class plus an element, (0,1,1), so Elementor was repainting every