/* ========================================================================== Cleaning Service Website — the five themes -------------------------------------------------------------------------- One class on selects one of these. Every theme draws the SAME markup: nothing in resources/views/sections/ knows which theme is running, and no theme adds or removes an element. That is the whole arrangement, and it is why five looks cost about as much as one. Each block does two things: 1. redefines the tokens in site.css, which is most of the work 2. adds the handful of rules that give it a personality Rules to keep if you add a sixth: * define it for light AND dark. Every one of these is a real combination, and a customer with a dark phone will see it. * anything that moves goes behind prefers-reduced-motion. site.css already switches off transitions, fixed backgrounds and the reveal animation globally, so a theme must not introduce motion by any other route. * it has to be readable at 400px wide with no sideways scroll. 1. Classic — clean corporate, serif headings, generous white space 2. Parallax — layered fixed backgrounds, big display type, reveals 3. Glass — frosted cards over a soft gradient, blurred header 4. Bold — heavy uppercase type, full width colour blocks, no radius 5. Editorial — magazine grid, rules, small capitals, an opening letter ========================================================================== */ /* ========================================================================== 1. Classic -------------------------------------------------------------------------- The safe one. A law firm, a wholesaler, a customs agent. Nothing moves except the reveal fade, headings are set in a serif, and the space between bands is the loudest thing on the page. ========================================================================== */ .theme-classic { --font-head: Georgia, "Times New Roman", "Segoe UI", serif; --head-weight: 600; --head-tracking: -0.012em; --head-line: 1.2; --h1: clamp(2rem, 4.6vw, 3.1rem); --h2: clamp(1.5rem, 3vw, 2.1rem); --band-y: 5.5rem; --radius: 6px; --radius-lg: 8px; --radius-pill: 4px; --card-shadow: none; --card-border: 1px solid var(--line); --hero-min: 62vh; } /* A short brand rule under a section heading, which is the one ornament this theme allows itself. */ .theme-classic .band__head::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 1.1rem; background: var(--brand); } .theme-classic .band__head--center::after { margin-inline: auto; } /* On the numbers band the rule would be brand on brand, so it follows the ink of whatever band it lands in instead. */ .theme-classic .band--stats .band__head::after, .theme-classic .band--cta .band__head::after { background: currentColor; opacity: .45; } /* Classic's hero is LIGHT by default. Ink on paper, not text on a photograph, and the veil only appears when there is something behind it to darken. */ .theme-classic .hero { background: var(--surface-2); border-bottom: 1px solid var(--line); } .theme-classic .hero__art { opacity: .16; } .theme-classic .card:hover { border-color: var(--line-strong); } .theme-classic .btn { border-radius: 4px; } .theme-classic .quote { border-inline-start: 3px solid var(--brand); } .theme-classic .site-head { box-shadow: none; } .theme-classic .icon-tile { border-radius: 4px; } html[data-theme="dark"].theme-classic { --surface-2: #151e2d; --surface-3: #1d2839; } /* ========================================================================== 2. Parallax -------------------------------------------------------------------------- Layers. The hero picture and the numbers band are fixed to the viewport so the page scrolls over them, and everything arrives with a fade. All of it is CSS plus one IntersectionObserver, and all of it is off under prefers-reduced-motion. ========================================================================== */ .theme-parallax { --head-weight: 800; --head-tracking: -0.035em; --head-line: 1.03; --h1: clamp(2.4rem, 6.4vw, 4.2rem); --h2: clamp(1.7rem, 3.8vw, 2.6rem); --band-y: 6rem; --radius: 14px; --radius-lg: 22px; --dark-bg: #070c16; --card-shadow: var(--shadow); --hero-min: 88vh; } /* The two fixed layers. background-attachment is the whole parallax: no scroll handler, no transform on scroll, nothing that can drop a frame. */ .theme-parallax .hero, .theme-parallax .hero__art, .theme-parallax .band--stats { background-attachment: fixed; } /* Parallax's hero is DARK whether or not a photograph was uploaded, so the artwork can be drawn at full strength. The ink has to be switched with it: site.css only lights the type when there is a real picture, and a theme that darkens the panel itself owns that decision. */ .theme-parallax .hero { background-color: #0a1120; color: var(--ink-on-dark); } .theme-parallax .hero h1, .theme-parallax .hero .hero__sub, .theme-parallax .hero p { color: var(--ink-on-dark); } .theme-parallax .hero .eyebrow { color: #ffffff; opacity: .8; } .theme-parallax .hero .btn--outline { border-color: rgba(255, 255, 255, .5); color: #fff; } .theme-parallax .hero__art { opacity: .6; } /* A hero this tall with a picture behind it needs a heavier veil at the bottom, or the first line of the section below reads through it. */ .theme-parallax .hero__veil { background: linear-gradient(180deg, rgba(6, 10, 20, .55) 0%, rgba(6, 10, 20, .4) 40%, rgba(6, 10, 20, .88) 100%); } /* Two soft out of focus shapes behind the hero text. Decorative, so they are drawn by the theme rather than sitting in the markup. */ .theme-parallax .hero::before, .theme-parallax .hero::after { content: ""; position: absolute; z-index: 1; border-radius: 50%; filter: blur(70px); pointer-events: none; } .theme-parallax .hero::before { width: 42vw; height: 42vw; left: -8vw; top: -12vw; background: rgba(var(--brand-rgb), .5); } .theme-parallax .hero::after { width: 34vw; height: 34vw; right: -6vw; bottom: -14vw; background: rgba(var(--accent-rgb), .38); } .theme-parallax .band--alt { background: radial-gradient(1200px 400px at 12% -10%, rgba(var(--brand-rgb), .12), transparent 60%), var(--surface-2); } /* Further travel on the reveal than the other themes, because this one is about arrival. Still the same class, still armed by the same script, and still switched off with everything else under reduced motion. */ .theme-parallax .reveal.is-armed { transform: translateY(40px) scale(.995); } .theme-parallax .card { border-width: 1px; } .theme-parallax .card:hover { transform: translateY(-4px); } .theme-parallax .btn--brand { box-shadow: 0 10px 30px rgba(var(--brand-rgb), .35); } .theme-parallax .icon-tile { background: linear-gradient(140deg, var(--brand), var(--accent)); color: var(--brand-ink); } .theme-parallax .stat__value { text-shadow: 0 4px 22px rgba(0, 0, 0, .25); } html[data-theme="dark"].theme-parallax { --bg: #070c16; --surface: #0f1726; --surface-2: #0b1220; --surface-3: #16202f; } /* ========================================================================== 3. Glass -------------------------------------------------------------------------- Frosted panels over a gradient that stays put. The gradient is on a fixed pseudo element rather than on the body, so it cannot be scrolled off and cannot stretch on a long page. ========================================================================== */ .theme-glass { --radius: 18px; --radius-lg: 26px; --band-y: 4.8rem; --head-weight: 700; --head-tracking: -0.025em; --bg: #eef2fa; --surface: #ffffff; --surface-2: rgba(255, 255, 255, .45); --surface-3: rgba(255, 255, 255, .55); --line: rgba(120, 140, 180, .28); --line-strong: rgba(120, 140, 180, .45); --card-bg: rgba(255, 255, 255, .55); --card-border: 1px solid rgba(255, 255, 255, .7); --card-shadow: 0 12px 40px rgba(34, 52, 90, .13); --card-blur: blur(16px) saturate(140%); --hero-min: 76vh; } .theme-glass body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(900px 620px at 8% 0%, rgba(var(--brand-rgb), .38), transparent 62%), radial-gradient(760px 560px at 96% 12%, rgba(var(--accent-rgb), .3), transparent 60%), radial-gradient(900px 700px at 50% 110%, rgba(var(--brand-rgb), .22), transparent 62%), var(--bg); } .theme-glass .site-head { background: rgba(255, 255, 255, .58); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, .6); } /* Bands are see through, so the gradient behind the page is the background of every one of them. */ .theme-glass .band--alt, .theme-glass .page-hero { background: transparent; } .theme-glass .page-hero { border-bottom: 1px solid var(--line); } .theme-glass .hero { background: transparent; } .theme-glass .hero__veil { display: none; } .theme-glass .hero__art { opacity: .5; mix-blend-mode: soft-light; } /* The hero text sits on a panel of its own, which is what makes the theme legible over whatever gradient or picture is behind it. */ .theme-glass .hero__content { padding: 2.2rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 20px 60px rgba(34, 52, 90, .16); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); } /* The panel is light, so the hero ink stays dark even with a picture behind it. on-dark is undone here on purpose. */ .theme-glass .hero.on-dark, .theme-glass .hero.on-dark h1, .theme-glass .hero.on-dark .hero__sub, .theme-glass .hero.on-dark p { color: var(--ink); } .theme-glass .hero.on-dark .hero__sub, .theme-glass .hero.on-dark p { color: var(--ink-2); } .theme-glass .hero.on-dark .eyebrow { color: var(--brand-fg); opacity: 1; } .theme-glass .hero.on-dark .btn--outline { border-color: var(--line-strong); color: var(--ink); } .theme-glass .input, .theme-glass .textarea, .theme-glass .select { background: rgba(255, 255, 255, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .theme-glass .card:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(34, 52, 90, .2); } .theme-glass .band--stats { background: rgba(var(--brand-rgb), .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .theme-glass .band--cta { background: rgba(14, 21, 34, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .theme-glass .site-foot { background: rgba(10, 16, 28, .88); backdrop-filter: blur(14px); } html[data-theme="dark"].theme-glass { --bg: #080d18; --surface: #131c2b; --surface-3: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .24); --card-bg: rgba(20, 30, 46, .6); --card-border: 1px solid rgba(255, 255, 255, .12); --card-shadow: 0 14px 44px rgba(0, 0, 0, .5); } html[data-theme="dark"].theme-glass .site-head { background: rgba(13, 20, 32, .6); border-bottom-color: rgba(255, 255, 255, .1); } html[data-theme="dark"].theme-glass .hero__content { background: rgba(20, 30, 46, .58); border-color: rgba(255, 255, 255, .12); box-shadow: 0 24px 64px rgba(0, 0, 0, .55); } html[data-theme="dark"].theme-glass .input, html[data-theme="dark"].theme-glass .textarea, html[data-theme="dark"].theme-glass .select { background: rgba(255, 255, 255, .07); } /* Not every browser has backdrop-filter, and a translucent panel with no blur behind it is unreadable. Where it is missing, the panels become solid. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .theme-glass { --card-bg: #ffffff; --card-border: 1px solid rgba(120, 140, 180, .3); } .theme-glass .site-head { background: #ffffff; } .theme-glass .hero__content { background: rgba(255, 255, 255, .94); } html[data-theme="dark"].theme-glass { --card-bg: #141d2c; } html[data-theme="dark"].theme-glass .site-head { background: #0d1420; } html[data-theme="dark"].theme-glass .hero__content { background: rgba(19, 28, 43, .96); } } /* ========================================================================== 4. Bold -------------------------------------------------------------------------- Heavy uppercase type, square corners, thick borders, and every other band is a full width block of the brand colour. For a gym, an event company or anything selling energy. ========================================================================== */ .theme-bold { --font-head: "Helvetica Neue", Helvetica, Arial, sans-serif; --head-weight: 900; --head-transform: uppercase; --head-tracking: -0.03em; --head-line: .98; --h1: clamp(2.4rem, 8vw, 5rem); --h2: clamp(1.8rem, 4.6vw, 3rem); --h3: 1.22rem; --radius: 0px; --radius-lg: 0px; --radius-pill: 0px; --band-y: 5rem; --card-bg: var(--surface); --card-border: 3px solid var(--ink); --card-shadow: none; --line: #1a1f29; --line-strong: #1a1f29; --dark-bg: #101319; /* This theme's buttons are heavier: more padding and a 3px border, which comes out at 48.5px. The header's icon buttons follow, or the switch beside the call to action is ten pixels shorter than it. */ --ctl-h: 48px; --hero-min: 80vh; } .theme-bold .site-head { border-bottom: 3px solid var(--ink); } .theme-bold .brand__mark { border-radius: 0; } /* The colour block. Redefining the ink tokens inside the band is what carries the change down to every heading, paragraph and card in it, without a single extra class in the markup. */ .theme-bold .band--alt { background: var(--brand); --ink: var(--brand-ink); --ink-2: var(--brand-ink); --ink-3: var(--brand-ink); --line: var(--brand-ink); --line-strong: var(--brand-ink); --card-bg: transparent; --card-border: 3px solid var(--brand-ink); color: var(--brand-ink); } .theme-bold .band--alt .eyebrow { color: var(--brand-ink); opacity: .8; } .theme-bold .band--alt .icon-tile { background: rgba(255, 255, 255, .16); color: var(--brand-ink); } .theme-bold .band--alt .btn--brand { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--brand); } .theme-bold .band--alt .text-link { color: var(--brand-ink); text-decoration: underline; } .theme-bold .band--alt .chip { background: rgba(255, 255, 255, .18); color: var(--brand-ink); } /* The other half of the same rule, and it was missing. The block IS the brand colour, so anything site.css draws IN the brand colour disappears into it: the opening quote mark, the initial in an avatar, the chevron that is the only sign a question opens, and the icon beside every line of the address. Measured at 1.00:1, which is not faint, it is absent, and no test can see it. The required field asterisk is the same problem from the other direction: a dark red on magenta. */ .theme-bold .band--alt .quote__mark { color: var(--brand-ink); opacity: .6; } .theme-bold .band--alt .avatar { background: rgba(255, 255, 255, .2); color: var(--brand-ink); } .theme-bold .band--alt .faq__q svg, .theme-bold .band--alt .detail-list svg { color: var(--brand-ink); } .theme-bold .band--alt .person__role { color: var(--brand-ink); } .theme-bold .band--alt .label__req { color: var(--brand-ink); } .theme-bold .band--alt a.card:hover .card__title { color: var(--brand-ink); } .theme-bold .btn { border-width: 3px; border-color: var(--ink); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .88rem; padding: .8rem 1.4rem; } .theme-bold .btn--brand { border-color: var(--brand); } .theme-bold .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } .theme-bold .band--alt .btn:hover { box-shadow: 4px 4px 0 var(--brand-ink); } .theme-bold .card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--brand); } /* --head-line is .98 for the display sizes, which is right for a hero and far too tight for a two line uppercase card title, where the lines touch. */ .theme-bold .card__title, .theme-bold h3 { line-height: 1.12; } .theme-bold .band__head { max-width: 900px; } .theme-bold .eyebrow { --tracking: .2em; } /* Same arrangement as Parallax: the panel is dark by the theme's own decision, so the theme lights the ink rather than leaving it to the picture that may not be there. */ .theme-bold .hero { background-color: #10131a; color: var(--ink-on-dark); } .theme-bold .hero h1, .theme-bold .hero .hero__sub, .theme-bold .hero p { color: var(--ink-on-dark); } .theme-bold .hero .eyebrow { color: var(--accent); opacity: 1; } .theme-bold .hero .btn { border-color: #ffffff; } /* The outline button needs its INK lit as well as its border. On a hero this theme darkened itself, `on-dark` is not applied (there is no photograph), so the base rule leaves the wording in page ink and the button reads as an empty box. */ .theme-bold .hero .btn--outline { color: #ffffff; } .theme-bold .hero .btn--outline:hover { background: rgba(255, 255, 255, .14); } /* And the same everywhere else the ink goes light. `.theme-bold .btn` sets every border to --ink, which outranks site.css's on-dark rule, so on the call to action band the secondary button was drawn with a near black ring on the brand colour while its wording was white. The hero had been fixed; nothing else had. */ .theme-bold .on-dark .btn--outline { border-color: #ffffff; color: #ffffff; } .theme-bold .on-dark .btn--outline:hover { background: rgba(255, 255, 255, .14); box-shadow: 4px 4px 0 #ffffff; } .theme-bold .hero .btn--brand { border-color: var(--brand); } .theme-bold .hero .btn:hover { box-shadow: 4px 4px 0 #ffffff; } .theme-bold .hero__art { opacity: .42; } .theme-bold .hero__veil { background: linear-gradient(90deg, rgba(10, 13, 20, .9), rgba(10, 13, 20, .45)); } .theme-bold .stat__value { font-size: clamp(2.4rem, 7vw, 4rem); } .theme-bold .quote { border: 3px solid var(--ink); } .theme-bold .faq { border-bottom-width: 2px; } .theme-bold .faq:first-child { border-top-width: 2px; } .theme-bold .icon-tile { border-radius: 0; } html[data-theme="dark"].theme-bold { --line: #eef1f6; --line-strong: #eef1f6; --card-border: 3px solid var(--ink); --surface: #131823; --surface-2: #0d1218; } /* ========================================================================== 5. Editorial -------------------------------------------------------------------------- A magazine. Serif throughout, rules instead of cards, small capitals on the meta lines, an opening letter on an article, and a lead item that is twice the width of the others. Built for the sites that are mostly words: a school, a council, a news desk. ========================================================================== */ .theme-editorial { --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --head-weight: 700; --head-tracking: -0.015em; --head-line: 1.12; --h1: clamp(2.2rem, 5.6vw, 3.8rem); --h2: clamp(1.6rem, 3.4vw, 2.3rem); --body-size: 17px; --body-line: 1.72; --radius: 2px; --radius-lg: 2px; --radius-pill: 2px; --band-y: 4.2rem; --card-bg: transparent; --card-border: 0; --card-shadow: none; --bg: #fbfaf7; --surface: #fbfaf7; --surface-2: #f3f1ea; --surface-3: #e8e5db; --line: #d9d5c9; --line-strong: #b8b2a2; --dark-bg: #16150f; --hero-min: 58vh; } .theme-editorial .site-head { border-bottom: 2px solid var(--ink); } /* :not(.btn) for the same reason site.css uses it: this is a rule about nav LINKS, and without it the header's button is sized from here too. */ .theme-editorial .site-nav a:not(.btn) { font-family: var(--font-body); font-size: .96rem; } /* Rules, not tints. The alternating band is marked by lines above and below it rather than by a change of colour. */ .theme-editorial .band--alt { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .theme-editorial .band__head { border-bottom: 2px solid var(--ink); padding-bottom: .9rem; max-width: none; } .theme-editorial .eyebrow { font-family: var(--font-body); font-variant: small-caps; text-transform: none; --tracking: .1em; font-size: .95rem; color: var(--ink-3); } /* A card is a column of type under a hairline, which is what a magazine page actually looks like. */ .theme-editorial .card { border-top: 1px solid var(--line); border-radius: 0; } .theme-editorial .card__body { padding: 1.1rem 0 1.4rem; } .theme-editorial .card__foot { padding: 0 0 1.4rem; } .theme-editorial .card__meta { font-variant: small-caps; letter-spacing: .07em; font-size: .9rem; } .theme-editorial .card__title { font-size: 1.3rem; } .theme-editorial .card:hover { transform: none; box-shadow: none; } .theme-editorial .cover { border-radius: 0; } /* The lead item is twice as wide, which is the one structural difference any of the five themes makes. It is a grid span, so it reflows to a single column with everything else on a narrow screen. */ @media (min-width: 900px) { .theme-editorial .grid--lead { grid-template-columns: repeat(3, minmax(0, 1fr)); } .theme-editorial .grid--lead > *:first-child { grid-column: span 2; } .theme-editorial .grid--lead > *:first-child .card__title { font-size: 1.9rem; } .theme-editorial .grid--lead > *:first-child .cover { aspect-ratio: 21 / 9; } } /* The opening letter. first-of-type, so it lands on the first paragraph and not on a heading, and only in an article body. */ .theme-editorial .article__body > p:first-of-type::first-letter { float: inline-start; font-size: 3.6em; line-height: .82; font-weight: 700; margin-block: .06em 0; margin-inline: 0 .1em; color: var(--brand-fg); } .theme-editorial .hero { background: var(--surface-2); border-bottom: 2px solid var(--ink); } /* Very faint: the shipped artwork is dark, and at a fifth it turned this theme's paper colour into a flat grey block that read as a different site above the fold. */ .theme-editorial .hero__art { opacity: .08; } .theme-editorial .quote { border: 0; border-inline-start: 2px solid var(--ink); border-radius: 0; padding-block: .3rem; padding-inline: 1.4rem 0; background: transparent; box-shadow: none; backdrop-filter: none; } .theme-editorial .quote__text { font-size: 1.14rem; font-style: italic; } .theme-editorial .btn { font-family: var(--font-body); } .theme-editorial .btn--brand { border-radius: 2px; } .theme-editorial .page-hero { background: transparent; border-bottom: 2px solid var(--ink); } .theme-editorial .icon-tile { background: transparent; border: 1px solid var(--line-strong); border-radius: 0; } .theme-editorial .prose { max-width: 66ch; } html[data-theme="dark"].theme-editorial { --bg: #14130f; --surface: #14130f; --surface-2: #1b1a15; --surface-3: #23211a; --line: #3a372c; --line-strong: #56513f; --ink: #f0ece0; --ink-2: #cdc7b6; --ink-3: #9c9585; }