/* ═══════════════════════════════════════════════════════════════════════════ SITE-AURORA — ONE SURFACE, SEVEN PAGES Colin, on the ERP after it was restyled: "now make every page follow this format with the tiles etc. just leave the weird colors on the outside out we dont need them but the colors inside the tiles are perfect." That is the whole brief and it is a good one. The thing that made the ERP stop looking like an admin panel was never hue — it was SHAPE: panels with altitude instead of outlines, one radius everywhere, cards that are separate objects rather than one bordered strip with hairline gutters, and light falling across the page. Colour stays where it means something, which on these pages is inside a tile: a green figure, an amber threshold, a red breach, a fund letter. WHY THIS FILE EXISTS AT ALL. The six marketing pages were built one after another by copying the last one, which is how they ended up with six different navigation bars — see the comment above the nav block in each of them. Doing the same thing again with six copies of a card style would produce the same drift on a slower fuse. So this is one file, linked last in every page's , overriding by position. Change a shadow here and it changes on all six in the same commit. WHAT IT DELIBERATELY DOES NOT TOUCH. · The dark hero on index.html and the dark bands on erp-platform.html. Those are already the strongest thing on the site and reversing them out would cost the pages their spine. · Anything inside a tile — figures, chips, statutory bands, table cells. That is the colour Colin is keeping. · platform.html, which is the analytics application shell, not a marketing page. It is a different product and it is not restyled from here. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --sa-r: 16px; /* one radius */ --sa-r-sm: 11px; --sa-r-lg: 20px; /* Four stacked shadows, because one shadow is a drop shadow and four is an object with light falling on it: a hairline that replaces the border, a close contact shadow, a mid shadow, and a wide soft one that lifts it off the page. Identical ramp to the ERP's, so the two products feel like one company. */ --sa-lift: 0 0 0 1px rgba(16,40,30,.06), 0 1px 2px rgba(16,40,30,.06), 0 8px 18px -8px rgba(16,40,30,.16), 0 28px 50px -24px rgba(16,40,30,.24); --sa-lift-2: 0 0 0 1px rgba(16,40,30,.075), 0 2px 5px rgba(16,40,30,.07), 0 14px 28px -10px rgba(16,40,30,.20), 0 40px 70px -28px rgba(16,40,30,.32); --sa-hair: rgba(16,40,30,.07); } /* ── THE FIELD ───────────────────────────────────────────────────────────── Near-achromatic on purpose. "leave the weird colors on the outside out" — so what is left is a cool near-white that goes very slightly cooler down the page, and one breath of the product's green at the top left so a page is still recognisably WhiteOak. Fixed to the viewport, not to the document, so the light stays where the light is instead of scrolling off after two screens and leaving the rest of the page grey. */ body{ background: radial-gradient(76% 60% at -8% -14%, rgba(10,158,92,.10) 0%, transparent 60%), radial-gradient(84% 66% at 108% 102%, rgba(120,148,168,.10) 0%, transparent 64%), linear-gradient(180deg,#fafcfb 0%, #f2f5f4 58%, #eef2f1 100%); background-attachment:fixed; } /* Every light section on every page was painting its own flat white or flat grey over that field. They go transparent and let it through; the dark ones are named and kept. */ .roi-section,.compare-section,.lead-section,.two, .sec,.sec-white,.sec-light, .lp-body,.lp-sec, .eb-band:not(.dark){background:transparent} /* .tint was a pale band used to alternate erp-platform's rhythm. With a field behind it, alternation is the shadow of the tiles rather than a stripe. */ .eb-band.tint{background:rgba(255,255,255,.34)} /* ── THE TILES ───────────────────────────────────────────────────────────── The single change that does most of the work. Every card-shaped thing on the six pages loses its 1px grey border and gains altitude. Padding, type and grid templates are untouched — the tile widths Colin liked are the ones the pages already had. */ .pcard,.feat,.lead-card,.roi-callout,.tbl-wrap, .lp-card,.lp-note,.lp-index, .eb-c,.eb-mono,.eb-quote,.eb-list > div, .card,.faq-item,.trust-item, .cta-form{ border:0; border-radius:var(--sa-r); /* Clip to the corner. Several of these tiles carry a full-bleed header — the green cap on the pricing card, the dark half of the split, the two product cards on the home page — and a full-bleed child inside a rounded parent with no clip puts two square pixels of colour outside the shape at every corner. That is the single most obvious way to make a rounded interface look like a square one somebody rounded. */ overflow:hidden; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); box-shadow:var(--sa-lift); } /* Two exceptions that keep a left edge because the edge is the meaning: a callout is a callout because something is pointing at it, and a pull quote is a quote because a rule says so. */ .roi-callout{border-left:4px solid var(--green,#0A9E5C);border-radius:0 var(--sa-r) var(--sa-r) 0} .eb-quote{border-left:3px solid rgba(10,158,92,.55)} /* The pricing card somebody is meant to choose, and the hero card on the ERP page, get the deeper shadow. One object leads on a page, the same way one figure leads on a KPI strip. */ .card.alt,.card.feature,.lp-card{box-shadow:var(--sa-lift-2)} /* ── THE FIGURE STRIPS ───────────────────────────────────────────────────── .kpi-strip and .lp-strip were one bordered box with 1px gutters showing the line colour through, which is exactly why four figures read as one object. They are four objects. The grid template is NOT touched, so nothing reflows and the tile widths stay where they are. */ .kpi-strip{background:transparent;border:0;border-radius:0;overflow:visible;gap:11px} .kpi-item{background:rgba(255,255,255,.88);border-radius:var(--sa-r);padding:16px 18px; -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); box-shadow:var(--sa-lift)} .kpi-strip > .kpi-item:first-child{box-shadow:var(--sa-lift-2)} /* The divider between figures on the marketing strips was a 1px rule. With the figures on separate tiles there is nothing left for it to divide. */ .lp-div,.proof-div{opacity:0} /* ── TABLES ──────────────────────────────────────────────────────────────── .tbl-wrap already clips its table at the corner, so the table inside gets no radius of its own: a rounded table inside a rounded wrapper is the double corner that makes an interface look assembled rather than designed. What changes is the hairlines, from grey to a tint of the ink so they recede. */ .tbl-wrap{overflow:hidden} /* FOURTH TIME. index.html paints `.stbl thead tr` with the dark header colour and its cells with white text; this repainted the CELLS to a light wash and left the text white, so the savings table's header row — SAVINGS CATEGORY, $65M, $100M, $150M+ — was white on white. Same defect as the demo input, the module list and the support CTA, and the same fix: the foreground goes in the same declaration as the background, every time. */ .stbl th,.ctbl th{border-bottom-color:rgba(16,40,30,.10); background:rgba(255,255,255,.55)} /* `.stbl thead th` in the page, not `.stbl th`: index.html sets the white text with two element selectors and a class, and a rule with one element selector loses to it however late it is linked. Overriding by POSITION only works at equal specificity, which is the trap in a stylesheet whose whole method is to be linked last. */ .stbl thead th,.ctbl thead th{color:rgba(16,40,30,.62)} .stbl thead tr,.ctbl thead tr{background:transparent} .stbl td,.ctbl td{border-bottom-color:rgba(16,40,30,.055)} .stbl tr:hover td,.ctbl tr:hover td{background:rgba(10,158,92,.045)} /* ── CONTROLS ────────────────────────────────────────────────────────────── Same size, same padding, same words. A rounder shape, and a hairline plus a contact shadow instead of a border, so a row of them reads as objects. */ .btn-primary,.cta-btn,.lp-btn,.sp-btn,.nav-cta{ border-radius:10px; box-shadow:0 4px 14px -5px rgba(10,158,92,.65)} .btn-ghost,.sp-btn-ghost{ border:0;border-radius:10px; box-shadow:0 0 0 1px var(--sa-hair), 0 1px 2px rgba(16,40,30,.05)} /* ── AND THE ONE INPUT ON THIS SITE WAS WHITE ON WHITE ───────────────────── Colin, on the live site: "everything in white you cant type." Exactly that, and it was this rule. The demo form sits in a DARK band, so index.html styles it `background:rgba(255,255,255,.06); color:#fff` — white text on a dark translucent field, which is right there. This file then repainted the BACKGROUND to rgba(255,255,255,.94) for the light pages and said nothing about the colour, so the text stayed white: white on white, with a white caret, on the single form that asks a prospect for their email address. You could type into it and see nothing at all. That is the general shape of a shared stylesheet defect and it is worth naming: a rule that changes ONE HALF of a contrast pair inherits whatever the other half was, and the other half was set for a background that no longer exists. Anything that repaints a background here sets its foreground in the same declaration. The caret goes with it. A caret is drawn from `color` unless told otherwise, so a white caret on white is the same defect one property along, and it is the one that makes the field feel broken rather than empty. */ .cta-input{border:0;border-radius:10px;background:rgba(255,255,255,.94); color:#10231B;caret-color:#0A9E5C; box-shadow:0 0 0 1px var(--sa-hair), 0 1px 2px rgba(16,40,30,.04)} .cta-input::placeholder{color:rgba(16,35,27,.42)} .cta-input:focus{outline:none;background:#fff;color:#10231B; box-shadow:0 0 0 1px var(--green,#0A9E5C), 0 0 0 4px rgba(10,158,92,.16)} /* -webkit-autofill repaints the field from the browser's own palette and takes the text colour with it. An inset shadow of the field's own colour is the only reliable way to hold it, and the text colour has to be forced. */ .cta-input:-webkit-autofill, .cta-input:-webkit-autofill:focus{ -webkit-text-fill-color:#10231B; -webkit-box-shadow:0 0 0 40px #fff inset;} /* ── THE DARK BANDS KEEP THEIR OWN LIGHT ─────────────────────────────────── On a dark ground the same idea inverts: depth comes from a LIT top edge rather than from a shadow underneath, because there is nothing beneath a dark panel for a shadow to fall on. One inset highlight is what separates "a dark background" from "a surface with light falling on it". */ .hero-card,.dc,.eb-band.dark .eb-c,.eb-band.dark .eb-mono{ border:0;border-radius:var(--sa-r); box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 0 0 1px rgba(255,255,255,.07), 0 24px 48px -24px rgba(0,0,0,.7)} /* ── THE COST, AND WHERE IT IS NOT PAID ──────────────────────────────────── backdrop-filter is the expensive declaration here. A phone gets the tint and the shadow without the sampling, which at 86% white is a difference almost nobody can see and every device can feel — and somebody who asked their operating system to reduce motion usually asked for a reason. */ @media (max-width:820px), (prefers-reduced-motion:reduce){ .pcard,.feat,.lead-card,.roi-callout,.tbl-wrap,.lp-card,.lp-note,.lp-index, .eb-c,.eb-mono,.eb-quote,.eb-list > div,.card,.faq-item,.sp-cta, .sp-cta-block,.trust-item,.cta-form,.kpi-item{ -webkit-backdrop-filter:none;backdrop-filter:none; background:rgba(255,255,255,.95)} } /* And print. A page that gets photocopied for a board packet needs hairlines, not shadows and tints — which is what these pages were before this file. */ @media print{ body{background:#fff} .pcard,.feat,.lead-card,.tbl-wrap,.lp-card,.lp-note,.lp-index,.eb-c,.eb-mono, .eb-quote,.card,.faq-item,.sp-cta,.sp-cta-block,.trust-item,.kpi-item{ box-shadow:none;background:#fff;border:1px solid #d8ded9; -webkit-backdrop-filter:none;backdrop-filter:none} .kpi-strip{gap:0} } /* ── THE FOOTER RAN OFF THE SIDE OF EVERY PHONE ──────────────────────────── `.footer-links{display:flex;gap:20px}` with ten links in it is 606px wide on a 390px screen, so every page on this site scrolled sideways on a phone — the whole page, not just the footer, because one overflowing child widens the document. It has been true on all six pages since the footer was written, and it is invisible on a desktop, which is where it was written. `flex-wrap` and a smaller gap on small screens. Nothing else changes: on a desktop the row still fits on one line and looks exactly as it did. */ .footer-links{flex-wrap:wrap;} @media(max-width:760px){ .footer-links{gap:12px 16px;justify-content:flex-start;} } /* ── AND A COMPARISON TABLE ON A PHONE ───────────────────────────────────── .ctbl is a four-column comparison with a header row that cannot compress below about 474px: on a 390px screen it widened the whole document and the home page scrolled sideways. A table is the right shape for this content and squeezing it into one column would make it unreadable, so it SCROLLS — inside its own box, the way every wide table on the ERP already does, rather than taking the page with it. .tbl-wrap is the shape the rest of the site already uses for exactly this. Where a table has no wrapper, the table itself gets the behaviour. */ .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} @media(max-width:760px){ table.ctbl,table.stbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch; max-width:100%;white-space:nowrap;} table.ctbl > *,table.stbl > *{white-space:normal;} } /* ── AND A THREE-COLUMN GRID WRITTEN INLINE ──────────────────────────────── support.html and pricing.html each carry a three-column grid declared in a style="" attribute, which no media query can reach — so on a 390px phone the three columns stayed three columns, 285px + 172px + 149px inside a 326px box, and the third one sat 289px off the right-hand edge of the screen. An inline style beats a stylesheet on specificity, so this needs the one place in this file where !important is the correct tool rather than the lazy one: the rule it is overriding cannot otherwise be reached at all. The grids now carry .g3 so the override is aimed at them by name and not at every grid on the site. */ @media(max-width:760px){ .g3{grid-template-columns:1fr !important;} } /* ── AND A DARK BAND IS NOT A TILE ───────────────────────────────────────── Colin, pointing at the bottom of the support page: "what the fuck is this blank stuff." A white box with a green button floating in it and no words. `.sp-cta` is a DARK call-to-action band — support.html gives it `background:var(--hdr)` and `color:#fff` — and it was in the tile list above, which repainted it to rgba(255,255,255,.86) and said nothing about the text. White heading and white paragraph on a white card: "Still need help?" and the sentence under it were both still there, both invisible. This is the THIRD time today the same defect has appeared — the demo email input, the module list on the ERP page, and now this — and all three have one cause: a rule that repaints a BACKGROUND for one set of pages inherits whatever foreground was set for a different background. Anything that repaints a background in this file now sets its foreground with it, and a component whose whole identity is that it is dark does not belong in a list of things to paint white. It keeps the SHAPE it was given — one radius, altitude, no border — because the shape was the point of the change. Only the colour goes back. */ .sp-cta,.sp-cta-block{ border:0; border-radius:var(--sa-r); overflow:hidden; box-shadow:var(--sa-lift); } /* ── AND A CARD WITH NO SIDE PADDING PUTS THE WORDS ON ITS OWN EDGE ──────── Colin: "dont like the bubble being cut right next ot the words." pricing.html's FAQ was a list of rows separated by a top border, so `padding:24px 0` was right: no horizontal padding, because there was no box to be inside. The tile rule above turned each row into a card, and the padding did not come with it — so every question and answer began and ended flush against the edge of its own bubble, which is what makes a card look like a mistake rather than a container. support.html's FAQ already carried `padding:24px 28px` and is untouched by this; it is the one that looks right, which is how the difference was visible in the first place. */ .faq-item{padding-left:28px;padding-right:28px}