/* Theme Name: Nexeva Theme URI: https://bigbeard.co.za Description: Child theme holding the design system and all custom styling for this site. Built by Big Beard Web Solutions. Author: Big Beard Web Solutions Author URI: https://bigbeard.co.za Template: generatepress Version: 1.10.1 */ /* ========================================================================== WHERE THINGS LIVE This file holds two things and nothing else: the design values as named variables, and the type. Everything that draws something lives in assets/css/, one file per surface: base.css the pieces used on more than one page. Loads everywhere header.css the top bar, logo, menu, search, account, basket footer.css the footer home.css the home page about.css About Nexeva team.css Meet The Team contact.css Contact Us shop.css the shop and every category page product.css the single product page cart.css the basket and the checkout account.css the account notices.css every message WooCommerce or WordPress puts on the screen written.css the policy, terms, FAQ and other plain text pages ONE FILE PER SURFACE, AND ONLY THAT SURFACE'S FILE LOADS ON IT. A customer browsing the shop never downloads the product page's styling. The loading rules are in functions.php and they are the only place that decides it. A rule that belongs to two surfaces goes in base.css. A rule copied into two files is a bug waiting to happen, because one copy always gets fixed and the other does not. ========================================================================== THE DESIGN VALUES These come out of the design token file the designer exported, not out of a screenshot and a guess. Replace every value below during stage 1, then never write a raw colour or size anywhere else in the theme. If a value is not here it does not exist. ========================================================================== */ :root { /* Colours. Named for what they are, not what they look like, so a rebrand is one edit rather than a search for every occurrence of a hex code. Taken from resources/brand/Nexeva Brand Guide.pdf, section 04, and checked against the signed home page design. The three primaries are the client's own Pantone-matched values, not sampled from a picture. */ --brand: #003e4e; /* 309 CP. Headings, the footer, dark buttons */ --brand-dark: #00323e; /* the darker end of the footer gradient */ --brand-light: #00a8b0; /* 320 CP. The second colour in every heading */ --accent: #f1666c; /* 2346 CP. Buttons, kickers, the numbers */ --mint: #8dd1c6; /* 4163 CP, secondary */ --band: #ebf7f5; /* the pale band behind What we do */ /* The band behind the four numbers is not one flat colour: it lifts from an almost white bottom left corner into a deeper mint at the top right. Both ends are sampled off the design. */ --band-pale: #eaf0f0; --band-deep: #d1eae6; --ink: #003e4e; /* body text. The design sets it in the brand colour, not a neutral grey */ --ink-soft: #4a6b74; /* secondary text and captions */ --line: #e6e7e8; /* 10% Black from the guide. Borders and rules */ --page: #ffffff; --panel: #ffffff; /* the Why Nexeva cards sit white on white, separated by a shadow rather than a fill */ --ok: #2e7d32; --warn: #b26a00; --error: #b3261e; /* Type. The brand guide names All Round Gothic for the logo and feature headings and Helvetica for everything else. The signed home page design uses Helvetica throughout, including every heading, so that is what is set here. All Round Gothic appears on this site only inside the logo, which is a picture. Nothing is downloaded. Apple devices already have Helvetica Neue, which is exactly the design font. Windows falls back to Arial, which has the same widths so no line rewraps. This is the fastest possible answer and it needs no font licence. If Nexeva turn out to hold a web licence for All Round Gothic, add it in assets/css/fonts.css and change --font-display below. Nothing else moves. */ --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: var(--font); --size-xs: 0.75rem; --size-sm: 0.875rem; /* 18px, from the Figma token export, not 16. The parent theme's default was smaller and the paragraphs measured about a tenth short against the design. Everything on the scale below is still relative to the browser's own 16px root, so changing this moves body copy and nothing else. */ --size-base: 1.125rem; --size-lg: 1.25rem; --size-xl: 1.5rem; --size-2xl: 2rem; /* 40px. Measured off the design exports and confirmed by the Figma token file, which calls this one 40 on a 50 line height. It was 44, which is why the About page's first heading read too large. */ --size-3xl: 2.5rem; --size-stat: 2.625rem; /* the four numbers: 18 FSEs, Multi-year... */ --size-lead: 1.875rem; /* the What we do sentence */ --size-4xl: 3rem; /* the hero heading */ --size-5xl: 3.75rem; /* the one heading the design sets larger than the rest, over the four numbers */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing. A scale, not arbitrary numbers, so spacing stays consistent across surfaces nobody thought to compare. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* The gap between one section of the page and the next. Measured off the design rather than chosen: every vertical boundary on the home page is about 105px, and a coloured band counts as a boundary in its own right. So the gap from the last line of one section to the top edge of a coloured band is 105, and the gap from that edge to the band's own first line is 105 again, which is why a band reads as further away than a plain section does. Each section carries half of it above and half below, so two plain sections meeting still add up to one gap and not two. */ --space-band: 3.25rem; /* 52px, half of the ~105 the design uses */ /* Corners. ONE ROUNDING FOR EVERYTHING, set here and used everywhere: buttons, cards, badges, form fields, tick boxes, paging. Picture tiles are usually the deliberate exception and get the large one. Vibe Vision, 12 August: a small border radius that was on some things and not others was noticed immediately and took several passes to make consistent. Deciding it once here is cheaper. */ --radius: 999px; /* every button in the design is a full pill */ --radius-large: 18px; /* cards, picture tiles and the banded sections */ /* Widths. Three, and every page is one of them. See page-head.php. full a grid, a filter column, or pictures that run edge to edge default the normal page narrow a form, or a column of text somebody has to read */ --width-full: 1694px; --width-default: 1400px; --width-narrow: 900px; /* The gutter down each side of a picture that runs edge to edge, measured off the signed design: the hero panel is 1885 wide in a 1920 frame, with the same gap left, right and top. It is what lets the rounded corners read as a floating panel rather than a boxed in column. */ --gutter-bleed: 17px; /* The gap between two of those floating panels when they sit one above the other, e.g. the closing panel and the footer. Chad, 3 September: this is a value of its own in the design, not the gutter doubled. Measured on three pages and it is the same on all of them: 50 in the design's 2x exports on Home and Contact, 48 on About. */ --card-gap: 25px; /* There is no separate "how far the wording sits in" value, on purpose. The design starts every section at 113 in a 1920 window, which is what a 1694 column centred in 1920 does by itself. But the content column was narrowed to 1400 on 31 August because the cards read too wide at 1694, and a fixed 113 left behind afterwards meant the header and an inner page's title sat further out than the page below them. So the page column IS the indent, for the header, the hero, the bands and the footer alike. It is set once in base.css. Do not reintroduce a separate gutter here: that is the thing that came apart. */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-lifted: 0 6px 20px rgba(0, 0, 0, 0.10); /* The frosted glass used by the floating header pill and the contact popup. Chad, 31 August: sampled the design and the header pill reads as a cool blue-grey over the hero photo, not a plain white frost, and the menu text sitting on it is white rather than the usual ink. Chad, 31 August, second pass: the first version used the dark brand colour and came out too saturated, too "blue". He sent the actual Figma layer: the fill is #5EA0AF, a much lighter, greyer teal, at 20% opacity, fading to 14% across the pill, with a glass blur on top. That is what is set here. */ --glass-bg: linear-gradient(120deg, rgba(94, 160, 175, 0.20) 0%, rgba(94, 160, 175, 0.14) 100%); --glass-border: rgba(255, 255, 255, 0.35); --glass-blur: 14px; /* Naomi, 1 September: the "What we do" tile hover panel uses the same frosted glass as the header, but darker, so the copy stays readable sitting directly over a photograph rather than the hero. Same brand navy as the buttons and footer, not the header's blue-grey. Chad, 1 September, second pass: the first version read as a flat dark overlay rather than glass. Naomi's own panel is a rounded card that sits inset within the tile with the photo still visibly blurred through it, so this is lighter and the blur is stronger. */ --glass-bg-dark: linear-gradient(160deg, rgba(0, 62, 78, 0.34) 0%, rgba(0, 50, 62, 0.58) 100%); --glass-blur-panel: 24px; } /* ========================================================================== THE SAME TYPE, SMALLER, ON A TABLET AND A PHONE Chad, 3 September: a lot of the site's headings were never coming down on a phone. They were not, and the reason matters more than the sizes: every heading that did shrink was shrinking because somebody had written a second rule for it by hand, one heading at a time. Anything added afterwards was born full size, and a heading with a more particular rule of its own, like the team names on Meet The Team, ignored the general one and stayed at 40px on a phone. So the scale itself comes down here instead, in one place. Every heading on the site is already written in these names, so they all follow, including any heading added later. That is the point: this cannot be forgotten, the way a per heading rule can. Only the large end moves. Body copy, the small print and the labels stay the size they are, because they are already set for reading on a phone and shrinking them would do harm rather than good. ========================================================================== */ @media (max-width: 1200px) { :root { --size-xl: 1.375rem; /* 22, from 24 */ --size-lead: 1.625rem; /* 26, from 30 */ --size-2xl: 1.75rem; /* 28, from 32 */ --size-3xl: 2rem; /* 32, from 40 */ --size-stat: 2.125rem; /* 34, from 42 */ --size-4xl: 2.375rem; /* 38, from 48 */ --size-5xl: 2.75rem; /* 44, from 60 */ } } @media (max-width: 700px) { :root { --size-xl: 1.25rem; /* 20 */ --size-lead: 1.375rem; /* 22 */ --size-2xl: 1.5rem; /* 24 */ --size-3xl: 1.625rem; /* 26 */ --size-stat: 1.75rem; /* 28 */ --size-4xl: 1.875rem; /* 30 */ --size-5xl: 2rem; /* 32 */ } }