/* ========================================================================== Wanted / Montage skin ========================================================================== The layout is style.css's. This file only changes what the page is made of: surface, type, colour, radius, weight. Every rule hangs off body[data-theme="montage"], which every public page now carries. The attribute is doing two jobs: it is the switch (drop it from a and that page falls back to the paper-and-red-pen look), and it holds the specificity. A bare `body` would be a class lighter, and several of the rules below only win against style.css because of the weight this selector gives them. /admin/ deliberately does not carry it. Most of it is token substitution, because style.css draws almost everything from :root. The component rules below are for the places a token cannot reach — the graph-paper lattice, the handwritten kicker, the marking-pen underline, and the dark Cyberschool band. Two deliberate departures from the reference, both noted where they happen: a filled primary action, and a display-sized headline. */ body[data-theme="montage"] { /* --- Montage colour roles, mapped onto style.css's names --------------- */ --ink: #171719; /* heading */ --ink-soft: #26272b; /* body — a step darker than the captured #333: the office read the page as pale */ --meta: #5f6167; /* metadata — was #858688, same reason */ --paper: #ffffff; /* canvas */ --white: #ffffff; --surface: #f5f7fa; /* subtle surface, a touch cool */ --rule: #e3e6eb; /* hairline */ --grid: #e3e6eb; /* hairline (the lattice is removed outright further down, so this now only feeds the 1px borders) */ --red: #0066ff; /* the accent keeps style.css's name so every rule that reaches for it moves together */ --red-soft: #ebf2ff; --card-line: #c9dcff; /* the resting border on a card — the accent at a quarter strength */ --navy-deep: #14213D; /* the navy the hero, the badged card and the footer are built from. The reference has no navy; the office asked for one, and a near-black card in a row of white ones was the thing it replaced */ /* Inset control boundary, straight from the reference's header-action and filter-button. Translucent on purpose: it settles against whatever surface it lands on. */ --control-line: rgba(112, 115, 124, 0.16); --font-display: "Pretendard Variable", Pretendard, -apple-system, system-ui, "Segoe UI", sans-serif; --font-body: "Pretendard Variable", Pretendard, -apple-system, system-ui, "Segoe UI", sans-serif; --font-mono: "Pretendard Variable", Pretendard, system-ui, sans-serif; --font-hand: "Pretendard Variable", Pretendard, system-ui, sans-serif; /* 12px for media, 8px for controls. style.css's --radius is the media one, since that is what the cards and thumbnails use. */ --radius: 12px; --control-radius: 8px; /* Flat. The reference promotes one shadow and it is for an open menu, not for cards, so nothing else gets to cast one. */ --shadow: none; background: var(--paper); color: var(--ink-soft); font-family: var(--font-body); /* Up from the captured 15px. The reference is a job board read at arm's length by people who use it daily; this is a school read once by a parent, and 15px on their phone was the first thing they mentioned. */ font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ========================================================================== Type ========================================================================== */ /* The captured scale tops out at a 22px section heading, which is a product heading — it belongs above a list of jobs, not above a page that has to introduce a school. Montage's own note says the published scale runs from Display 1 down to Caption 2 and that the captured set is only the part grounded in that one capture, so the headline sizes here come from the display end. Weight, tracking and colour stay as captured. */ body[data-theme="montage"] h1, body[data-theme="montage"] h2, body[data-theme="montage"] h3, body[data-theme="montage"] h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; } /* Section headings are set roughly twice the size the capture had them. The first pass took the reference's product-heading scale literally, and a 22px section heading over a full-width band read as a caption. The home headline keeps its size: it sits in a 32rem column beside the photograph, and a display size does not fit there. */ body[data-theme="montage"] .hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); font-weight: 700; letter-spacing: -0.024em; line-height: 1.2; margin-bottom: 0.5em; } body[data-theme="montage"] .section-title { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.16; max-width: none; } /* The kicker was a line of red pen in Caveat. Montage has no handwriting, so it is metadata: a quiet grey line above the heading, a step darker and a size up from the capture so it can be read, but not coloured. It was the accent for a day, along with every other small label, and the page read as a template — the accent is for things that can be pressed. */ body[data-theme="montage"] .eyebrow { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; color: var(--meta); text-transform: none; margin-bottom: 0.7rem; transform: none; /* the red-pen tilt belongs to the old skin */ } /* Metadata sits flat and follows whatever the block around it is aligned to, rather than being centred over its own slant. */ body[data-theme="montage"] .eyebrow--stacked { line-height: 1.45; text-align: inherit; } body[data-theme="montage"] .section-lead, body[data-theme="montage"] .hero-pitch { font-size: 1.125rem; /* 18px */ line-height: 1.6; color: var(--ink-soft); } /* The pen stroke under the headline phrase is switched off further down for the white pages. On the navy it comes back: white words on a dark ground have nothing else picking the key phrase out. */ body[data-theme="montage"] .page-hero--photo .pen-word svg { display: block; } /* The marking-pen stroke under the headline phrase is the one piece of the old identity with no equivalent here: the reference keeps the accent for actions and selection, so a decorative blue underline would be spending it in the wrong place. The word stays, the stroke goes. */ body[data-theme="montage"] .pen-word svg { display: none; } /* …except under a handwritten word, where the pen stroke is the point. */ body[data-theme="montage"] .hand-word.pen-word svg { display: block; } /* ========================================================================== Controls ========================================================================== */ /* The reference documents an outline action — transparent, accent label, 8px radius, 1px inset boundary — and explicitly declines to promote a filled CTA, because none was in the capture. A page whose whole job is to get a parent to book a tour needs one primary action that reads as primary, so the filled variant below is an extension, not something the capture supports. Everything else follows the documented outline. */ body[data-theme="montage"] .btn { font-family: var(--font-body); font-size: 0.9375rem; /* 15px */ font-weight: 600; line-height: 1; border-radius: var(--control-radius); border: 1px solid var(--control-line); padding: 0.9em 1.3em; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } /* No lift on hover — the reference's product cards and controls are flat. */ body[data-theme="montage"] .btn:hover { transform: none; } body[data-theme="montage"] .btn-red { background: var(--red); border-color: var(--red); color: #ffffff; } body[data-theme="montage"] .btn-red:hover { background: #0057db; border-color: #0057db; } body[data-theme="montage"] .btn-outline { background: transparent; color: var(--ink); border-color: var(--control-line); } body[data-theme="montage"] .btn-outline:hover { background: var(--surface); color: var(--ink); border-color: var(--control-line); } body[data-theme="montage"] .btn-ghost { background: transparent; color: var(--red); border-color: var(--control-line); } body[data-theme="montage"] .btn-ghost:hover { background: var(--red-soft); border-color: var(--control-line); } /* ========================================================================== Surfaces ========================================================================== */ /* The graph paper goes. It is the signature of the look being replaced, and the reference's canvas is plain white with the structure carried by hairlines instead. The photographed heroes are left alone: they carry their own ground. */ body[data-theme="montage"] .hero, body[data-theme="montage"] .page-hero:not(.page-hero--photo) { background-image: none; background-color: var(--paper); border-bottom: 1px solid var(--rule); } body[data-theme="montage"] .hero::after { display: none; } /* The alternate bands are tinted after all. The first pass left everything white with a hairline between, and a page of white on white was read as empty — the office asked for colour behind the sections and the room between them filled. */ body[data-theme="montage"] .section-alt { background: var(--surface); border-block: 1px solid var(--rule); } body[data-theme="montage"] .section-alt + .section-alt { border-top: 0; } body[data-theme="montage"] #cyberschool { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* The faint blue the course pages put behind "How a term runs". On the home page it sits behind the course cards and the FAQ — the two blocks a parent is there to read — so the page has a colour of its own between the white bands and the grey ones. */ body[data-theme="montage"] .band-soft { background: linear-gradient(180deg, #eef4ff, #e4eeff); border-block: 1px solid #d3e2ff; } body[data-theme="montage"] .offers { --offers-bg: var(--paper); border-bottom: 1px solid var(--rule); } body[data-theme="montage"] .offers-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.16; } body[data-theme="montage"] .offers-note { font-size: 0.875rem; color: var(--meta); } body[data-theme="montage"] .offer-count { font-family: var(--font-body); font-weight: 600; color: var(--ink); } /* ========================================================================== Hero photo ========================================================================== */ /* It was a washed, mask-faded layer sitting over drifting graph paper, which was the only way to keep it from fighting the lattice. There is no lattice now, so it can just be a photograph: full strength, 12px media radius, no mask, no wash. */ @media (min-width: 981px) { body[data-theme="montage"] .hero--timetable::before { background-color: transparent; background-image: url("../images/hero/backhero-side.webp"); background-size: cover; background-position: center top; border-radius: var(--radius); -webkit-mask-image: none; mask-image: none; /* The paper skin ran this flush to the top, where the header's own rule was the line it started from. A hard-edged rectangle with a 12px corner has to be seen to have a top edge, so it comes down off the header — and the height comes off with it, because the bottom is the end that has to stay put. */ --hero-photo-gap: clamp(1rem, 2.2vw, 2rem); /* A square. Its side is whichever is tighter: the height the opening block leaves it (the block fills the first screen — see .hero-intro below — less the gap the photo hangs down from the header by), or the width the container leaves once the 32rem column of words and the gutter between them are kept clear. Whichever wins, the square sits centred in that height rather than pinned to the top. */ --hero-photo-avail: calc(var(--hero-intro-h) + clamp(2.25rem, 5vw, 3.75rem) - var(--hero-photo-gap)); --hero-photo-side: min(var(--hero-photo-avail), 46vw, calc(var(--container) - 35rem)); --hero-photo-w: var(--hero-photo-side); --hero-photo-h: var(--hero-photo-side); top: calc(var(--hero-photo-gap) + (var(--hero-photo-avail) - var(--hero-photo-side)) / 2); } /* The words and the photograph take the whole first screen — the office's "fill the screen" — and the posters wait under it, reached by scrolling. The 6rem is the hero's own padding, the notice strip and a little air under the last button before the carousel starts. */ body[data-theme="montage"] .hero--timetable { --hero-intro-h: calc(100vh - var(--header-h) - 6rem); } body[data-theme="montage"] .hero--timetable .hero-intro { min-height: var(--hero-intro-h); display: flex; flex-direction: column; justify-content: center; } body[data-theme="montage"] .hero--timetable .hero-intro .hero-pitch { font-size: clamp(1.05rem, 1.35vw, 1.2rem); } } @media (max-width: 980px) { body[data-theme="montage"] .hero--timetable::before { opacity: 0.16; } } /* Everything on the photographed page heroes goes white. The generic heading and lead rules above carry the body prefix, so they outrank style.css's own .page-hero--photo colours; these restate them at the same weight. The kicker is pale blue rather than the accent, which would sink into the wash. */ body[data-theme="montage"] .page-hero--photo h1, body[data-theme="montage"] .section--photo .section-title { color: #ffffff; } body[data-theme="montage"] .section--photo .section-lead { color: rgba(255, 255, 255, 0.85); } body[data-theme="montage"] .section--photo .btn-outline { color: #ffffff; border-color: rgba(255, 255, 255, 0.6); } body[data-theme="montage"] .section--photo .btn-outline:hover { background: #ffffff; border-color: #ffffff; color: var(--navy-deep); } body[data-theme="montage"] .section--photo .faq-list { border-color: rgba(255, 255, 255, 0.35); } body[data-theme="montage"] .section--photo .accent-word { color: #8FBBFF; } body[data-theme="montage"] .hero--photo h1 .accent-word { color: #8FBBFF; } body[data-theme="montage"] .section--photo .course-card { border-color: rgba(255, 255, 255, 0.5); } body[data-theme="montage"] .section--photo .course-card:hover { border-color: #ffffff; } body[data-theme="montage"] .section--photo .course-card.is-featured { border-color: rgba(255, 255, 255, 0.4); } body[data-theme="montage"] .section--photo .course-card .btn-outline { color: var(--red); border-color: var(--red); } body[data-theme="montage"] .section--photo .course-card .btn-outline:hover { background: var(--red); color: #ffffff; border-color: var(--red); } body[data-theme="montage"] .section--photo .course-more .btn-outline { color: #ffffff; border-color: rgba(255, 255, 255, 0.6); } body[data-theme="montage"] .section--photo .course-more .btn-outline:hover { background: #ffffff; color: var(--navy-deep); border-color: #ffffff; } body[data-theme="montage"] .page-hero--photo .section-lead { color: rgba(255, 255, 255, 0.88); } body[data-theme="montage"] .page-hero--photo .eyebrow { color: #9DC0FF; } body[data-theme="montage"] .page-hero--photo .section-lead a { color: #9DC0FF; } body[data-theme="montage"] .page-hero--photo .btn-outline { color: #ffffff; border-color: rgba(255, 255, 255, 0.6); } body[data-theme="montage"] .page-hero--photo .btn-outline:hover { background: #ffffff; border-color: #ffffff; color: var(--navy-deep); } /* The home hero on a photograph (.hero--photo in style.css): the classroom picture behind the opening words, a band the height of the first screen under the navy wash, fading to paper before the carousel. The band is the words' full-first-screen block plus the hero's own padding, which is what --hero-intro-h was cut from; the side photo is replaced at every width. */ body[data-theme="montage"] .hero--photo { --hero-photo-band: calc(100vh - var(--header-h) + 0.5rem); background-image: none; background-color: var(--paper); border-bottom: 1px solid var(--rule); } /* The wash only: the picture behind it is the .hero-video element (style.css), whose poster is the old still, so this layer must stay clear of it. */ body[data-theme="montage"] .hero--photo::before { content: ""; position: absolute; inset: 0 0 auto 0; top: 0; width: auto; height: var(--hero-photo-band); opacity: 1; z-index: 1; border-radius: 0; background-color: transparent; background-image: linear-gradient(180deg, rgba(20, 33, 61, 0.84) 0, rgba(20, 33, 61, 0.88) 88%, var(--paper) 100%); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; -webkit-mask-image: none; mask-image: none; } body[data-theme="montage"] .hero--photo .hero-intro { max-width: 46rem; margin-inline: auto; text-align: center; align-items: center; } body[data-theme="montage"] .hero--photo .hero-intro .eyebrow, body[data-theme="montage"] .hero--photo .hero-intro .eyebrow--stacked { color: #9DC0FF; text-align: center; margin-inline: auto; } body[data-theme="montage"] .hero--photo h1 { color: #ffffff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); } /* The one line of handwriting the skin keeps: the dates over the home film, in the Caveat that style.css names for it. */ body[data-theme="montage"] .hero--photo .hero-intro .hero-eyebrow { font-family: "Caveat", "Segoe Script", cursive; font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; text-transform: none; color: #9DC0FF; margin: 0 auto 0.9rem; } body[data-theme="montage"] .hero--photo .pen-word svg { display: block; } body[data-theme="montage"] .hero--photo .pen-word path { stroke: #7FB0FF; } body[data-theme="montage"] .hero--photo .hero-pitch { color: rgba(255, 255, 255, 0.92); margin-inline: auto; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); } body[data-theme="montage"] .hero--photo .hero-actions { justify-content: center; } /* Under 981px the words are not held to the first screen, so the band is cut to the block of words instead — the same fitted height the old ghost photo used at these widths, which finishes under the last button. */ @media (max-width: 980px) { body[data-theme="montage"] .hero--photo { --hero-photo-band: clamp(24rem, 45rem - 41vw, 36rem); } } body[data-theme="montage"] .hero--photo .btn-outline { /* Solid, not outlined: on a phone this button lands where the wash fades to paper, and a bare white outline vanished there. */ color: #14213D; background: #ffffff; border-color: #ffffff; } body[data-theme="montage"] .hero--photo .btn-outline:hover { background: #E4EDFF; border-color: #E4EDFF; color: #14213D; } /* On a phone the display sizes above are wider than the screen. */ @media (max-width: 640px) { body[data-theme="montage"] .section-title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); } } /* ========================================================================== Cards ========================================================================== */ /* 12px, flat, and bounded by a line in the accent's own tint rather than the grey hairline — the office read the hairline as no border at all, and the near-black the hover went to as the wrong colour for this palette. The line goes to the full accent under the pointer. */ body[data-theme="montage"] .course-card, body[data-theme="montage"] .post-card, body[data-theme="montage"] .review-card, body[data-theme="montage"] .faq-item { background: var(--paper); border: 2px solid var(--card-line); border-radius: var(--radius); box-shadow: none; } /* The review body and its byline take the same card roles as a post card: copy a step under body size, metadata grey underneath, and the initial disc drops its red tint for the neutral surface the reference uses behind an avatar. */ body[data-theme="montage"] .review-card p { font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); } body[data-theme="montage"] .review-avatar { background: var(--surface); border: 1px solid var(--rule); color: var(--ink); font-weight: 600; } body[data-theme="montage"] .review-meta { font-size: 0.8125rem; letter-spacing: 0.025em; color: var(--meta); } body[data-theme="montage"] .course-card:hover, body[data-theme="montage"] .post-card:hover, body[data-theme="montage"] .review-card:hover, body[data-theme="montage"] .faq-item:hover { transform: none; box-shadow: 0 14px 34px -18px rgba(0, 102, 255, 0.35); border-color: var(--red); } /* The flat-card rule above sets a surface and a line on every side, which outranks the plain class marking the badged course — so the navy card is restated at this weight, along with the pill and the ticks on it. */ body[data-theme="montage"] .course-card.is-featured { background: var(--navy-deep); border-color: var(--navy-deep); } body[data-theme="montage"] .course-card.is-featured:hover { border-color: var(--red); } /* The generic h3 rule above paints every heading ink, at a weight the plain .is-featured h3 in style.css cannot beat — so on the navy card the title went black on near-black. Restated here at the same weight. */ body[data-theme="montage"] .course-card.is-featured h3 { color: #ffffff; } body[data-theme="montage"] .course-card.is-featured p { color: rgba(255, 255, 255, 0.78); } body[data-theme="montage"] .course-card.is-featured .course-tag { color: #9DC0FF; } body[data-theme="montage"] .course-badge, body[data-theme="montage"] .course-tag { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.025em; text-transform: none; } body[data-theme="montage"] .course-badge { font-size: 0.6875rem; border-radius: 999px; } body[data-theme="montage"] .course-points li { font-size: 0.95rem; line-height: 1.5; } /* Course details is the card's one action, so it is drawn in the accent — an outline that fills under the pointer. The grey-lined version read as disabled beside the filled button on the badged card. */ body[data-theme="montage"] .course-card .btn-outline { color: var(--red); border: 1.5px solid var(--red); background: transparent; } body[data-theme="montage"] .course-card .btn-outline:hover { background: var(--red); border-color: var(--red); color: #ffffff; } /* The tick sits on the accent's own tint, and the accent here is the blue. */ body[data-theme="montage"] .course-points li::before { background-color: var(--red-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066ff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); } body[data-theme="montage"] .course-card.is-featured .course-points li::before { background-color: rgba(255, 255, 255, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); } /* An outline action on the ink card would be a grey line on near-black. */ body[data-theme="montage"] .course-card.is-featured .btn-red { background: var(--white); border-color: var(--white); color: var(--navy-deep); } body[data-theme="montage"] .course-card.is-featured .btn-red:hover { background: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.88); } body[data-theme="montage"] .course-card h3, body[data-theme="montage"] .post-card h2, body[data-theme="montage"] .post-card h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; } body[data-theme="montage"] .course-card p, body[data-theme="montage"] .post-card p { font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); } /* The course tag was a red-tinted pill. It is metadata, like the kicker: the year line above a course name, in the same quiet grey. */ body[data-theme="montage"] .course-tag { background: transparent; color: var(--meta); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; padding: 0; } body[data-theme="montage"] .post-card-date { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.025em; color: var(--meta); } body[data-theme="montage"] .post-card-media img { border-radius: var(--radius); } /* ========================================================================== Rails ========================================================================== */ body[data-theme="montage"] .rail--campus .rail-card, body[data-theme="montage"] .yt-facade { border-radius: var(--radius); border: 1px solid var(--rule); box-shadow: none; } /* Round arrows on a hairline, not floating buttons. */ body[data-theme="montage"] .rail-nav, body[data-theme="montage"] .cf-nav { background: var(--paper); border: 1px solid var(--control-line); color: var(--ink); box-shadow: none; } body[data-theme="montage"] .rail-nav:hover, body[data-theme="montage"] .cf-nav:hover { background: var(--surface); color: var(--red); } /* .cf-caption sits on paper, so it takes the metadata colour. The campus caption is NOT in this list on purpose: it is laid over the photograph on a dark gradient, where grey-on-dark would be worse than the white it already has. */ body[data-theme="montage"] .cf-caption { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.025em; font-family: var(--font-body); color: var(--meta); } body[data-theme="montage"] .rail--campus figcaption { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.025em; font-family: var(--font-body); } body[data-theme="montage"] .cf-item img { border-radius: var(--radius); } /* ========================================================================== Cyberschool band ========================================================================== */ /* It was a deep navy panel with pale text. There is no navy in this palette and no inverted surface in the reference, so the band becomes the subtle surface and everything inside it comes back to the standard roles. */ body[data-theme="montage"] .cyber-band { color: var(--ink-soft); } body[data-theme="montage"] .cyber-band .eyebrow { color: var(--meta); } body[data-theme="montage"] .cyber-band .section-title { color: var(--ink); } body[data-theme="montage"] .cyber-band .section-lead { color: var(--ink-soft); } body[data-theme="montage"] .cyber-points { color: var(--ink-soft); } body[data-theme="montage"] .cyber-points li { font-size: 0.9375rem; color: var(--ink-soft); } /* The tick was drawn in the old pale-red-on-navy, baked into a data URI. It is redrawn here in the accent, which is the one place a coloured mark earns its keep: it marks what is included. */ body[data-theme="montage"] .cyber-points li::before { background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066ff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5 9.5 19 20 5.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat; } body[data-theme="montage"] .cyber-window { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: none; } body[data-theme="montage"] .cyber-chrome { background: var(--surface); border-bottom: 1px solid var(--rule); } body[data-theme="montage"] .cyber-url { background: var(--paper); border: 1px solid var(--rule); color: var(--meta); font-family: var(--font-body); font-size: 0.75rem; } /* ========================================================================== FAQ, enquiry, footer ========================================================================== */ /* The card rules above gave every question its own 2px box; here the list is one panel and the questions are rows in it. */ body[data-theme="montage"] .faq-list { background: var(--paper); border: 2px solid var(--card-line); border-radius: var(--radius); } body[data-theme="montage"] .faq-item, body[data-theme="montage"] .faq-item:hover { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; scale: 1; } body[data-theme="montage"] .faq-item:first-child { border-top: 0; } body[data-theme="montage"] .faq-item[open] { background: #f7faff; } body[data-theme="montage"] .faq-item > summary { font-size: 1.0625rem; font-weight: 600; color: var(--ink); } body[data-theme="montage"] .faq-answer { font-size: 1rem; color: var(--ink-soft); } /* The tiles under the map take the subtle surface, since the card they sit in is already white. */ body[data-theme="montage"] .visit-facts > div { background: var(--surface); border-color: var(--rule); } body[data-theme="montage"] .visit-facts dt { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--meta); } body[data-theme="montage"] .enquiry-form-col, body[data-theme="montage"] .enquiry-aside { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: none; } body[data-theme="montage"] input, body[data-theme="montage"] select, body[data-theme="montage"] textarea { font-family: var(--font-body); font-size: 1rem; /* the captured search-dialog input role */ border-radius: var(--control-radius); border: 1px solid var(--control-line); color: var(--ink); } body[data-theme="montage"] input:focus, body[data-theme="montage"] select:focus, body[data-theme="montage"] textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } body[data-theme="montage"] label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.025em; color: var(--meta); text-transform: none; } /* ========================================================================== Header, announcement bar, popup ========================================================================== */ body[data-theme="montage"] .site-header { background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--rule); } body[data-theme="montage"] .site-header.scrolled { box-shadow: none; } /* :not(.nav-tour) matters. Without it this rule outweighs style.css's `.site-nav a.nav-tour` — one class heavier — and paints the label of the filled Book a Tour button the same near-black as the plain nav links, on top of the blue. */ body[data-theme="montage"] .site-nav a:not(.nav-tour), body[data-theme="montage"] .nav-trigger { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 500; color: var(--ink); } body[data-theme="montage"] .site-nav a.nav-tour { background: var(--red); border: 1px solid var(--red); border-radius: var(--control-radius); color: #ffffff; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; padding: 0.7em 1.35em; margin-left: 1.5rem; box-shadow: 0 6px 18px -8px rgba(0, 102, 255, 0.6); } body[data-theme="montage"] .site-nav a.nav-tour:hover { background: #0057db; border-color: #0057db; color: #ffffff; } /* The only shadow the reference promotes, and it is for exactly this: an open menu overlay. 16px radius, 4px gap, two low-opacity layers. */ body[data-theme="montage"] .nav-menu, body[data-theme="montage"] .popup-body { border-radius: 16px; border: 1px solid var(--rule); box-shadow: 0 2px 4px -2px rgba(23, 23, 23, 0.06), 0 4px 6px -1px rgba(23, 23, 23, 0.06); } /* The strip takes the accent outright — the same blue as Book a Tour, which is the only other thing in the header asking to be acted on. A filled band above a white header needs no hairline to close it off, and everything inside it goes white: the link can no longer be the accent when the strip already is, so it is underlined instead. */ body[data-theme="montage"] .announce { background: var(--navy-deep); /* the navy of the logo */ color: #ffffff; border-bottom: 0; font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; } body[data-theme="montage"] .announce a { color: #ffffff; text-decoration: underline; } /* The separating dot was the accent, which is now the ground under it. */ body[data-theme="montage"] .announce-row li::before { background: rgba(255, 255, 255, 0.55); } /* ========================================================================== Dark panels elsewhere on the site ========================================================================== style.css builds a handful of content blocks out of the navy — a download group's header bar, the contact strip, the trial-course band, the exam stat tiles, the hours card's header. Under this palette --navy-deep resolves to #171719, which turned each of them into a black slab in the middle of a white page. The reference has no inverted content surface: what it has is a subtle surface, so that is what they become. The footer keeps the dark, because a footer is where a page is allowed to end. The accent is spent only where something is chosen or acted on — a selected timeslot, a term a year level is actually taught in. */ body[data-theme="montage"] .download-group h3, body[data-theme="montage"] .hours-card h3 { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--rule); } body[data-theme="montage"] .featured-download, body[data-theme="montage"] .contact-strip, body[data-theme="montage"] .act-trial, body[data-theme="montage"] .exam-stats > div { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: none; } body[data-theme="montage"] .contact-strip { border-radius: 0; border-inline: 0; } body[data-theme="montage"] .featured-download h2, body[data-theme="montage"] .featured-download h3, body[data-theme="montage"] .contact-strip h2, body[data-theme="montage"] .contact-strip h3, body[data-theme="montage"] .act-trial h2, body[data-theme="montage"] .act-trial h3, body[data-theme="montage"] .act-trial .section-title, body[data-theme="montage"] .exam-stats strong { color: var(--ink); } /* Kickers and links inside those blocks were tuned for pale-on-navy. */ body[data-theme="montage"] .contact-strip .eyebrow, body[data-theme="montage"] .act-trial .eyebrow, body[data-theme="montage"] .act-trial .course-sub { color: var(--meta); } /* The card's link and its plain paragraph share one rule in style.css, both set to white for the navy. The link wants the accent; the address, which is not a link, wants ink — without splitting them the address stayed white on the light band and read as an empty card. */ body[data-theme="montage"] .contact-card p { color: var(--ink); } body[data-theme="montage"] .contact-card a, body[data-theme="montage"] .act-trial .course-detail a, body[data-theme="montage"] .act-trial .course-detail-head:hover h2 { color: var(--red); } body[data-theme="montage"] .contact-card a:hover { color: #0057db; } body[data-theme="montage"] .contact-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: none; } body[data-theme="montage"] .act-trial .check-list li::before { color: var(--red); } /* The trial band sits on the faint blue the benefit bands use, so the two acts of the courses page are seen to be two different things. */ body[data-theme="montage"] .act-trial { background: linear-gradient(180deg, #eef4ff, #e4eeff); border: 0; border-block: 1px solid #d3e2ff; border-radius: 0; } body[data-theme="montage"] .exam-stats { background: var(--paper); border: 2px solid var(--card-line); overflow: visible; /* the info cards rise out of the tiles */ } /* Selection, not decoration. */ body[data-theme="montage"] .ruler-band.is-taught, body[data-theme="montage"] .key-swatch.is-taught, body[data-theme="montage"] .slot.is-selected { background: var(--red); border: 2px solid #0047b3; color: #ffffff; } /* The trial band was hatched in the old skin's pink; here the hatching is in the accent's tints with the accent as its line, so the two kinds of band are the same colour at two strengths — taught solid, sat as an exam striped. */ body[data-theme="montage"] .ruler-band.is-trial, body[data-theme="montage"] .key-swatch.is-trial { background: repeating-linear-gradient(45deg, #e6efff 0 6px, #cfe0ff 6px 12px); border: 2px solid var(--red); color: #0047b3; } body[data-theme="montage"] .key-swatch.is-trial { background: repeating-linear-gradient(45deg, #e6efff 0 4px, #cfe0ff 4px 8px); } body[data-theme="montage"] .ruler-band { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; min-height: 38px; } /* The ruler itself sits on a faint blue rather than plain white, framed in the card line, so the scale reads as one instrument and not six columns of nothing. */ body[data-theme="montage"] .ruler { background: linear-gradient(180deg, #ffffff, #f0f5ff); border: 2px solid var(--card-line); border-radius: var(--radius); box-shadow: none; } body[data-theme="montage"] .ruler-scale { border-bottom-color: var(--red); } body[data-theme="montage"] .ruler-tick::after { background: var(--card-line); } body[data-theme="montage"] .ruler-row:hover { background: rgba(0, 102, 255, 0.06); } body[data-theme="montage"] .ruler-name { font-family: var(--font-body); font-size: 1rem; font-weight: 700; } body[data-theme="montage"] .ruler-label, body[data-theme="montage"] .ruler-tick, body[data-theme="montage"] .ruler-key { font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: none; font-weight: 600; } body[data-theme="montage"] .ruler-tick { font-size: 0.9375rem; color: var(--ink); } /* Big, and the accent. It was a pale grey numeral the office read as a watermark. */ body[data-theme="montage"] .act-index { color: var(--red); } body[data-theme="montage"] .step-no { background: var(--red); color: #ffffff; } /* ========================================================================== Page heroes and long-form ========================================================================== */ body[data-theme="montage"] .page-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; } /* The glance tiles and the fee card follow the card rules above. */ body[data-theme="montage"] .fee-card, body[data-theme="montage"] .fee-sheet, body[data-theme="montage"] .timetable-figure { border: 2px solid var(--card-line); border-radius: var(--radius); box-shadow: none; } body[data-theme="montage"] .fee-card:hover, body[data-theme="montage"] .fee-sheet:hover, body[data-theme="montage"] .timetable-figure:hover { border-color: var(--red); } body[data-theme="montage"] .fee-rows dt, body[data-theme="montage"] .fee-rows dd { font-size: 1rem; } body[data-theme="montage"] .fee-note { font-size: 0.9rem; } body[data-theme="montage"] .glance-tile { background: var(--surface); border: 2px solid var(--card-line); border-radius: var(--radius); } body[data-theme="montage"] .glance-tile:hover { border-color: var(--red); } body[data-theme="montage"] .glance-tile dt { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--meta); } body[data-theme="montage"] .check-list li { font-size: 1.0625rem; } body[data-theme="montage"] .band-col { background: rgba(255, 255, 255, 0.75); border: 2px solid var(--card-line); border-radius: var(--radius); } body[data-theme="montage"] .band-col:hover { box-shadow: 0 14px 34px -18px rgba(0, 102, 255, 0.35); border-color: var(--red); } body[data-theme="montage"] .check-list li::before { color: var(--red); } body[data-theme="montage"] .subject { background: var(--paper); border: 2px solid var(--card-line); border-radius: var(--radius); } body[data-theme="montage"] .subject::before { background: var(--red); } body[data-theme="montage"] .subject:hover { border-color: var(--red); } body[data-theme="montage"] .subject h3 { font-size: 1.15rem; } body[data-theme="montage"] .subject p { font-size: 0.95rem; } body[data-theme="montage"] .prose, body[data-theme="montage"] .post-body { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); } body[data-theme="montage"] .prose a, body[data-theme="montage"] .post-body a { color: var(--red); } body[data-theme="montage"] .fact-sheet, body[data-theme="montage"] .notice, body[data-theme="montage"] .policy-toc, body[data-theme="montage"] .hours-card, body[data-theme="montage"] .download-group, body[data-theme="montage"] .teacher-card, body[data-theme="montage"] .booking-col, body[data-theme="montage"] .calendar { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: none; } body[data-theme="montage"] .teacher-card:hover { transform: none; box-shadow: none; border-color: var(--red); } /* Same story as the badged course card: the surface rule above would flatten the branch box back to a hairline. */ body[data-theme="montage"] .fact-sheet--branch { border-color: var(--red); } /* .btn-solid and the file-picker chip are the last two things built out of the near-black. A black button next to a blue one reads as a second, competing primary, so it joins the accent; the chip is a control, not an action, and takes the subtle surface. */ body[data-theme="montage"] .btn-solid { background: var(--red); border-color: var(--red); color: #ffffff; } body[data-theme="montage"] .btn-solid:hover { background: #0057db; border-color: #0057db; } body[data-theme="montage"] .file-field input[type="file"]::file-selector-button { background: var(--surface); color: var(--ink); border: 1px solid var(--control-line); border-radius: var(--control-radius); } /* ========================================================================== Text that was written for a dark band ========================================================================== style.css uses --rule for muted text sitting on the navy blocks, where a pale blue reads as secondary. Here --rule is the hairline, #e8e9ea, so every one of those lines went to near-white on a near-white surface and vanished. They come back as metadata. The footer and the disabled calendar cells are left alone: the footer is still dark, and a disabled cell is meant to be barely there. */ body[data-theme="montage"] .contact-strip .section-lead, body[data-theme="montage"] .contact-card h3, body[data-theme="montage"] .contact-card small, body[data-theme="montage"] .download-group h3 small, body[data-theme="montage"] .featured-download p, body[data-theme="montage"] .act-index { color: var(--meta); } /* Same story: the outline button in the contact strip was given a white label for the navy behind it, and that band is the subtle surface now. */ body[data-theme="montage"] .contact-strip .btn-outline { border-color: var(--control-line); color: var(--ink); } body[data-theme="montage"] .contact-strip .btn-outline:hover { background: var(--paper); color: var(--ink); } /* ========================================================================== Contact page enquiry form ========================================================================== */ /* The form is capped at 640px and was sitting hard against the left edge of a full-width section, with nothing beside it. Centred, it lines up under the heading block rather than reading as a column that lost its pair. */ body[data-theme="montage"] .enquiry-solo { margin-inline: auto; } /* ========================================================================== Trial-test band on /courses/ ========================================================================== This block was built entirely out of translucent white — text at .82, .72, .6, .5, card fills at .04, borders at .16 — because it sat on the navy. None of that follows a token, so turning the band light left most of it white on near-white. Every one of those values is restated here against the surface it actually has now. */ body[data-theme="montage"] .act-trial .section-lead, body[data-theme="montage"] .act-trial .course-deck, body[data-theme="montage"] .act-trial .course-body, body[data-theme="montage"] .act-trial .course-body > p, body[data-theme="montage"] .act-trial .check-list li { color: var(--ink-soft); } body[data-theme="montage"] .act-trial .course-detail strong { color: var(--ink); } body[data-theme="montage"] .act-trial .course-detail-head h2, body[data-theme="montage"] .exam-stats dd { color: var(--ink); } body[data-theme="montage"] .exam-stats dt, body[data-theme="montage"] .exam-stats dd span { color: var(--meta); } /* The stat strip's own fill was a white veil meant to lift it off the navy. Nothing to lift off now, so it carries a hairline instead. */ body[data-theme="montage"] .exam-stats { background: transparent; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } body[data-theme="montage"] .exam-stats > div { border: 0; border-radius: 0; background: var(--paper); } body[data-theme="montage"] .act-trial .course-detail { background: var(--paper); border-color: var(--rule); } body[data-theme="montage"] .act-trial .course-detail[open] { background: var(--paper); border-color: var(--ink); } body[data-theme="montage"] .act-trial .course-detail[open] .course-detail-head { border-bottom-color: var(--rule); } body[data-theme="montage"] .act-trial .course-toggle { background: var(--surface); border-color: var(--control-line); color: var(--ink); } body[data-theme="montage"] .act-trial .course-detail-head:hover .course-toggle { background: var(--red-soft); } body[data-theme="montage"] .exam-stats > div { overflow: visible; } /* The stat tiles let the info cards rise out of them (the rule above hides overflow for the rounded corners), and the figures take the accent. */ body[data-theme="montage"] .exam-stats { overflow: visible; } body[data-theme="montage"] .exam-stats dd { color: var(--red); } body[data-theme="montage"] .exam-stats dd span { color: var(--ink-soft); } /* The dropdown panels sit on a pale grey, a shade off the white header, so an open menu reads as a distinct object over the page; the hovered row goes white with the accent. Desktop only — in the folded menu the groups are plain lists. */ @media (min-width: 1301px) { body[data-theme="montage"] .nav-menu { background: var(--surface); border-color: var(--rule); box-shadow: 0 14px 34px -14px rgba(23, 23, 23, 0.25); } body[data-theme="montage"] .site-nav .nav-menu a:not(.nav-tour) { color: var(--ink); background: transparent; } body[data-theme="montage"] .site-nav .nav-menu a:not(.nav-tour):hover, body[data-theme="montage"] .site-nav .nav-menu a:not(.nav-tour):focus-visible, body[data-theme="montage"] .site-nav .nav-menu a:not(.nav-tour).active { color: var(--red); background: #ffffff; } }