/* ============================================================================ Rosamond Driving School — "Rosamond Red" ---------------------------------------------------------------------------- Taken from the school's own storefront: red ground, white and yellow display type, a yellow mascot. One colour, one job: red = structure. Header, footer, bands, headings. NEVER a button. yellow = action. Every button and nothing else on the page. ink = words and prices. sand = the alternating ground that keeps a red site from shouting. Measured contrast, in the context each pair is actually used: --red #C8161D on white ............... 5.62:1 AA normal text white on --red .......................... 5.62:1 AA normal text --ink #16120F on --yellow #FFD200 .... 13.4:1 AAA button label --ink on white ....................... 17.1:1 --ink on --sand #FBF6EE .............. 16.1:1 --muted #5C554E on white ............... 7.02:1 --muted on --sand ...................... 6.62:1 white on --red-dk #9C1016 ............... 9.06:1 footer ========================================================================= */ :root{ /* structure */ --red:#C8161D; --red-dk:#9C1016; --red-tint:#FCEDED; /* action */ --yellow:#FFD200; --yellow-dk:#E5B800; --yellow-lt:#FFE87A; /* ink, money, grounds */ --ink:#16120F; --muted:#5C554E; --paper:#FFFFFF; --sand:#FBF6EE; --card:#FFFFFF; --line:#E8E2D8; --money:#16120F; --radius:14px; --shadow-1:0 1px 2px rgba(22,18,15,.06); --shadow-2:0 1px 2px rgba(22,18,15,.06), 0 10px 28px rgba(22,18,15,.08); --wrap:1120px; --display:Archivo, "Segoe UI", system-ui, sans-serif; --text:"Source Sans 3", "Segoe UI", system-ui, sans-serif; } /* ---------- box-sizing: universal, not scoped --------------------------------- Below is a SEPARATE reset scoped to .site-shell (added by header.php) that guards the properties global.css fights over (color, font, margin on h1/h2/h3/p/a). box-sizing isn't one of those — global.css never sets box-sizing anywhere, so there's nothing to collide with, and it needs to be universal, not scoped: this file uses `width:100%` + `padding` on plenty of elements (.nav-in, .foot-in, .foot-legal p, and others), which is only correct with border-box. Pages built through header.php get border-box via .site-shell; but this registration page (cacourseprovider.com) is rendered by a different system that never adds that class to — so every one of those width:100%-plus-padding elements was quietly rendering wider than its container by its own padding, on THIS page specifically. That's what was pushing the Register button and the footer legal line past the screen edge — not scrollable, just genuinely too wide, so max-width:100%/ overflow-x:hidden on could only crop them, not fix them. */ *,*::before,*::after{box-sizing:border-box} /* ---------- reset ---------------------------------------------------------- Scoped to .site-shell (set on in header.php) rather than left as bare element selectors. global.css also declares body/h1/h2/h3/p/a with element selectors — same specificity as these used to have, so whichever stylesheet loaded last would win the tug-of-war on things like heading colour and link colour. `.site-shell h2` etc. has a class in it, so it always outranks a bare `h2` in global.css no matter which comes first or second, and no matter whether a later page pulls global.css in for some other block. None of the class-based rules below this point needed the same treatment: no class name here (.nav, .card, .foot, ...) appears anywhere in global.css, so there is nothing for those to collide with. Note: the box-sizing:border-box on .site-shell below is now redundant with the universal rule above — left in place so nothing regresses if the universal rule is ever removed. */ html{-webkit-text-size-adjust:100%} .site-shell,.site-shell *,.site-shell *::before,.site-shell *::after{box-sizing:border-box} .site-shell{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--text); font-size:1.0625rem; line-height:1.65; overflow-wrap:anywhere; } .site-shell img,.site-shell svg{max-width:100%; height:auto} .site-shell a{color:var(--red-dk)} .site-shell h1,.site-shell h2,.site-shell h3{font-family:var(--display); line-height:1.12; letter-spacing:-.015em; margin:0 0 .5em} .site-shell h1{font-size:clamp(2rem,4.6vw,3.05rem); font-weight:800} .site-shell h2{font-size:clamp(1.5rem,2.9vw,2.05rem); font-weight:800} .site-shell h3{font-size:1.16rem; font-weight:700} .site-shell p{margin:0 0 1em} .site-shell ul{margin:0 0 1em; padding-left:1.1em} .site-shell :focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:4px} .wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)} .skip{position:absolute; left:-9999px} .skip:focus{left:1rem; top:1rem; z-index:99; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:8px} /* The black utility strip (.strip / .strip-in / .strip-lic) was REMOVED here. It cost two stacked black bars above the header on a phone. Its licence is now .brand-lic below; its telephone is in the contact block and the footer. */ /* ---------- header --------------------------------------------------------- */ .nav{background:var(--paper); border-bottom:3px solid var(--red); position:sticky; top:0; z-index:20} /* The brand and the Log In / Register pair share one row at EVERY width. They used to stack below 560px, which — with the strip's second line and the link row wrapping — made five stacked bars before any content. The wordmark is a three-line stack about 95px wide, so it fits beside two compact buttons even at 360px; the buttons shrink rather than the row splitting. */ .nav-in{ width:100%; max-width:var(--wrap); margin-inline:auto; padding:.6rem clamp(1rem,4vw,2rem); display:grid; align-items:center; gap:.4rem .9rem; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand act" "lic lic" "links links"; } /* The licence sits under the brand lockup. It spans the full width rather than staying in the brand column, because in that column — squeezed between the wordmark and two buttons — it wrapped to three lines on a phone. */ .brand-lic{ grid-area:lic; margin:0; font-size:.76rem; font-weight:600; color:var(--muted); letter-spacing:.01em; } .brand{grid-area:brand; display:flex; align-items:center; gap:.6rem; text-decoration:none; min-width:0} .nav-act{grid-area:act; display:flex; gap:.4rem; flex:none} /* Compact enough to sit beside the wordmark on a 360px phone, still above the 44px minimum tap target. */ @media (max-width:559px){ .nav-act .btn{font-size:.85rem; padding:.55rem .7rem} .mascot-brand{height:42px} } /* Below 360px the row genuinely cannot hold mascot + wordmark + two buttons. The wordmark is nowrap by design (the global overflow-wrap:anywhere would otherwise break "ROSAMOND" mid-word), so it does not shrink to fit — it stays put and the buttons, drawn after it, land ON TOP of it. Zero page overflow the whole time, which is why this has to be caught by looking. At this width only, the brand and the buttons go back to separate rows. */ @media (max-width:359px){ .nav-in{grid-template-columns:minmax(0,1fr); grid-template-areas:"brand" "act" "lic" "links"} .nav-act{flex:auto} .nav-act .btn{flex:1 1 0; min-width:0} } .nav-links{grid-area:links; min-width:0} .nav-links ul{display:flex; flex-wrap:wrap; gap:.15rem .35rem; list-style:none; margin:0; padding:0} .nav-links a{ display:block; padding:.4rem .7rem; border-radius:8px; color:var(--ink); text-decoration:none; font-weight:600; font-size:.97rem; } .nav-links a:hover{background:var(--red-tint); color:var(--red-dk)} .nav-links a[aria-current="page"]{background:var(--red); color:#fff} /* The two same-page anchors drop off below 560px so the two real pages fit on one line — see the note in header.php. */ @media (max-width:559px){ .nav-sec{display:none} .nav-links a{font-size:.92rem; padding:.35rem .6rem} } @media (min-width:920px){ /* Links and the button pair each span both rows, so the licence tucks under the brand in the left column instead of taking a band of its own. */ .nav-in{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"brand links act" "lic links act"; } .nav-links ul{justify-content:center} /* At this layout the brand lockup + two buttons leave the middle "links" column with less room than var(--wrap) (1120px, shared with the page's body-content width) actually gives it — not enough for all four links on one line, so "Contact" was wrapping to its own row even on wide desktop screens. Only .nav-in gets extra max-width here; .nav-links itself still just fills whatever column width the grid gives it, and .wrap (the body content everywhere else on the page) is untouched, so this doesn't shift page content out of alignment with the header — it only lets the header itself run a bit wider than the content column below it, which is a common, intentional pattern for site chrome. Only takes effect once the viewport is wide enough to use it; narrower than this and .nav-in still just matches the viewport as before. */ .nav-in{max-width:1320px} } /* ---------- wordmark ------------------------------------------------------- */ /* The body sets overflow-wrap:anywhere so long strings never blow out a container. That rule must NOT reach the wordmark — it will happily break "ROSAMOND" into "ROSAM / OND" the moment the header gets tight. */ .wordmark{ display:grid; line-height:.9; font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.012em; overflow-wrap:normal; word-break:keep-all; white-space:nowrap; } .wordmark b{font-size:.92rem; color:var(--ink); font-weight:800} .wordmark em{font-size:1.24rem; font-style:normal; color:var(--red); font-weight:800} .wordmark i{font-size:.92rem; font-style:normal; color:var(--ink); font-weight:800} .wordmark-inv b,.wordmark-inv i{color:#fff} .wordmark-inv em{color:var(--yellow)} /* ---------- mascot --------------------------------------------------------- */ /* ---------- mascot -------------------------------------------------------- The school's own artwork. Its bonnet is the same red as the site's structure colour, so on the red hero it needs a light plate behind it or the bonnet reads as a hole straight through the car. The header is already white and needs nothing. */ .mascot{display:block; flex:none; height:auto} .mascot-brand{width:auto; height:52px} /* A plain plate. An asphalt-and-lane-line scene was tried here and read as messy — too much going on behind a drawing that is already busy. The plate's only job is to give the red bonnet a light ground so it stops looking like a hole through the car. It should be quiet. Keep it that way: the mascot IS the interest in this corner of the hero. */ .mascot-plate{ width:100%; max-width:440px; border-radius:22px; padding:clamp(1.1rem,2.8vw,1.9rem); background:var(--paper); box-shadow:0 2px 0 rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.24); display:flex; justify-content:center; } .mascot-hero{width:100%; max-width:400px} /* It reacts to you: a nudge forward when the brand link is hovered. */ .mascot{transition:transform .22s ease} .brand:hover .mascot-brand{transform:translateX(3px)} @media (prefers-reduced-motion:reduce){ .brand:hover .mascot-brand{transform:none} } /* ---------- buttons -------------------------------------------------------- */ /* Yellow is the action colour and appears nowhere else on the page. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.1; padding:.68rem 1.05rem; border-radius:10px; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; } .btn-go{ color:var(--ink); background:linear-gradient(180deg,#FFE04A 0%,var(--yellow) 55%,#F3C400 100%); border-color:var(--yellow-dk); box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 2px 0 var(--yellow-dk), var(--shadow-1); } .btn-go:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 var(--yellow-dk), var(--shadow-2)} .btn-go:active{transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.18)} .btn-login{ color:var(--ink); background:#fff; border-color:var(--ink); box-shadow:0 2px 0 rgba(22,18,15,.18); } .btn-login:hover{background:var(--sand); transform:translateY(-1px)} .btn-login:active{transform:translateY(1px); box-shadow:none} .btn-ghost{color:#fff; background:transparent; border-color:rgba(255,255,255,.75)} .btn-ghost:hover{background:rgba(255,255,255,.14)} .btn-lg{font-size:1.08rem; padding:.9rem 1.4rem} .btn-block{width:100%} @media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} .btn:hover,.btn:active{transform:none} } /* ---------- hero ----------------------------------------------------------- */ .hero{background:var(--red); color:#fff; border-bottom:6px solid var(--yellow)} .hero-in{ width:100%; max-width:var(--wrap); margin-inline:auto; padding:clamp(2rem,5vw,3.4rem) clamp(1rem,4vw,2rem); display:grid; gap:1.5rem clamp(1.5rem,4vw,3rem); grid-template-columns:minmax(0,1fr); align-items:center; } @media (min-width:880px){ .hero-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)} } .hero h1{color:#fff; margin-bottom:.35em} .eyebrow{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.09em; font-size:.8rem; color:var(--yellow); margin:0 0 .7em; } .lede{font-size:1.12rem; color:#FDECEC; max-width:52ch} .hero-art{display:flex; justify-content:center} .pricetag{ display:inline-flex; align-items:baseline; gap:.08em; background:#fff; color:var(--money); border-radius:12px; padding:.35rem .85rem .45rem; margin:.2em 0 1.1em; font-family:var(--display); font-variant-numeric:tabular-nums; box-shadow:0 3px 0 rgba(0,0,0,.14); } .pricetag .cur{font-size:1.15rem; font-weight:700; align-self:flex-start; margin-top:.35em} .pricetag .amt{font-size:2.5rem; font-weight:800; letter-spacing:-.02em} .pricetag .per{font-size:.9rem; font-weight:600; color:var(--muted); margin-left:.4rem; font-family:var(--text)} /* Price rail: both prices and the cue in one object. A translucent plate keeps it reading as a deliberate component on the red rather than as a stray line of text, without giving either price a tag the other one lacks. */ .hero-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .9rem; width:fit-content; max-width:100%; margin:0 0 1.3rem; padding:.7rem 1rem; background:rgba(0,0,0,.17); border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.17); color:#FDECEC; font-size:1rem; } .hero-price .hp-item{display:inline-flex; align-items:baseline; gap:.4rem} .hero-price .hp-item + .hp-item::before{ content:"\00B7"; color:rgba(255,255,255,.55); margin-right:.5rem; } .hero-price b{ font-family:var(--display); font-weight:800; font-size:1.45rem; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.01em; } /* The cue takes its own row rather than joining the middot chain. Left in the chain it wrapped, and the separator stranded itself at the start of the second line as a lone floating dot. Two rows is also the better read: the two prices are facts, the cue is the nudge. */ .hero-price .hp-cue{ color:var(--yellow); font-weight:700; flex-basis:100%; margin-top:.2rem; } /* Must out-specify `.hp-item + .hp-item::before` above (0,3,1), or the separator this rule exists to remove simply wins and reappears. */ .hero-price .hp-item + .hp-item.hp-cue::before{content:none; margin:0} .hero-act{display:flex; flex-wrap:wrap; gap:.7rem} /* The parent-facing reassurance sits under the buttons, not above them: it answers the question a parent asks after deciding, not before. */ .hero-note{margin:1.15rem 0 0; font-size:.95rem; color:#F7DEDE; max-width:58ch} .hero-note strong{color:#fff} /* ---------- returning-student band ----------------------------------------- */ .returning{ background:var(--ink); color:#F3EFEA; } .returning-in{ width:100%; max-width:var(--wrap); margin-inline:auto; padding:.85rem clamp(1rem,4vw,2rem); display:flex; flex-wrap:wrap; gap:.7rem 1.2rem; align-items:center; justify-content:space-between; } .returning p{margin:0; font-size:1rem} .returning strong{color:#fff} /* ---------- sections ------------------------------------------------------- */ .band{padding:clamp(2.4rem,5.5vw,4rem) 0} .band-sand{background:var(--sand); border-block:1px solid var(--line)} .band h2{color:var(--ink)} .band-head{max-width:60ch; margin-bottom:1.8rem} .band-head p{color:var(--muted); font-size:1.08rem; margin:0} /* ---------- the differentiation cards -------------------------------------- Same badge system as everywhere else, but the badge sits BESIDE the heading and the card carries a red top edge. That is what stops this row, the bare feature rack and the numbered steps from reading as three goes at the same object — which is what made the page feel busy in the first place. */ .why{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); } @media (min-width:900px){ .why{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem} } .why li{ background:var(--card); border:1px solid var(--line); border-top:3px solid var(--red); border-radius:var(--radius); padding:1.15rem 1.15rem 1.25rem; box-shadow:var(--shadow-1); } .why-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.75rem} .why-head .pt-badge{margin-bottom:0; width:38px; height:38px; border-radius:10px} .why h3{margin:0; font-size:1.06rem} .why p{margin:0; color:var(--muted); font-size:.99rem} /* ---------- feature rack --------------------------------------------------- This replaced a boxed 4-up grid (.points) that sat directly above the boxed 4-up .steps grid. Two identical card grids back to back read as filler however good the words are, so the facts lost their card chrome and are divided by hairlines instead — a spec rack, not a second row of cards. The badge is doing the work of naming each item; it needs no box behind it. */ .feats{ list-style:none; padding:0; margin:0; display:grid; gap:1.6rem; grid-template-columns:minmax(0,1fr); } .feats li{padding-top:1.3rem; border-top:1px solid var(--line)} @media (min-width:700px){ .feats{gap:1.6rem 2rem; grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1000px){ /* Two columns: the practice-permit-tests and required-hours items both came out. A column count above the item count leaves a hairline dividing nothing. Constrained so two items do not stretch across the full 1120. */ .feats{gap:0 2.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px} /* Vertical rules on wide screens: the row reads as one rack of four columns rather than four unrelated stacks. */ .feats li{ border-top:0; border-left:1px solid var(--line); padding:.15rem 1.5rem .15rem 1.5rem; } .feats li:first-child{border-left:0; padding-left:0} .feats li:last-child{padding-right:0} } .feats h3{margin:0 0 .3em} .feats p{margin:0; color:var(--muted); font-size:.99rem} /* One badge system: same box, same weight, recoloured by its surface. The icon inside depicts what the card is about — never a decorative glyph. */ .pt-badge{ width:44px; height:44px; border-radius:12px; background:var(--red-tint); color:var(--red-dk); display:grid; place-items:center; margin-bottom:.85rem; font-family:var(--display); font-weight:800; font-size:1.05rem; box-shadow:inset 0 0 0 1px rgba(200,22,29,.16); } .pt-num{font-variant-numeric:tabular-nums; letter-spacing:-.02em} .ico{width:24px; height:24px; display:block} /* ---------- numbered steps ------------------------------------------------- */ .steps{ list-style:none; counter-reset:step; padding:0; margin:0; display:grid; gap:1.1rem; grid-template-columns:minmax(0,1fr); } @media (min-width:760px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1060px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr))} } .steps li{ counter-increment:step; position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem 1.15rem 1.25rem; box-shadow:var(--shadow-1); } .steps li::before{ content:counter(step); position:absolute; top:-.85rem; left:1.15rem; width:2.1rem; height:2.1rem; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.05rem; box-shadow:0 2px 0 var(--red-dk); } .steps h3{margin:0 0 .3em} .steps p{margin:0; color:var(--muted); font-size:.99rem} .steps a{font-weight:600} /* ---------- package cards -------------------------------------------------- */ .cards{ display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr); margin:0; padding:0; list-style:none; } /* Back to three across now that the 4-hour block and the DMV test service are off the menu: three cards in a 2x2 left an orphan in the second row. */ @media (min-width:820px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} } .card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-2); overflow:hidden; } /* The header block is a fixed band so three cards line up even when one title wraps to two lines. Without this the bodies start at three different heights and the row reads as three unrelated boxes. */ .card-top{ background:var(--red); color:#fff; padding:1rem 1.15rem; display:flex; align-items:center; gap:.6rem; min-height:4.4rem; } .card-top h3{margin:0; color:#fff; font-size:1.1rem} /* The saving rides in the card header, beside the product it applies to — a page-wide "save" banner would read as a site-wide discount instead. Yellow is the action colour, so this is the one non-button that may borrow it: it is money, and money is what the yellow is for on this page. */ .card-flag{ margin-left:auto; flex:none; background:var(--yellow); color:var(--ink); font-family:var(--display); font-weight:800; font-size:.8rem; letter-spacing:.02em; white-space:nowrap; padding:.3rem .55rem; border-radius:999px; box-shadow:0 1px 0 var(--yellow-dk); } /* The bundle carries a little more weight than the two cards beside it. */ .card-lead{box-shadow:var(--shadow-2), 0 0 0 2px var(--yellow)} .card-body{padding:1.15rem; display:flex; flex-direction:column; flex:1} .card-list{list-style:none; padding:0; margin:0 0 1.2rem} .card-list li{position:relative; padding-left:1.85rem; margin-bottom:.55rem; font-size:1rem} /* Ring AND tick. The ring on its own was an empty circle — it read as an unticked radio button, i.e. as a feature you have NOT got, which is the opposite of what a package list is for. Same ring+tick as the shield icon, so the site has one check mark and not two. */ .card-list li::before{ content:""; position:absolute; left:0; top:.3rem; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--red-tint); box-shadow:inset 0 0 0 1.5px var(--red); } .card-list li::after{ content:""; position:absolute; left:.42rem; top:.52rem; width:.3rem; height:.58rem; border:solid var(--red-dk); border-width:0 2px 2px 0; transform:rotate(42deg); } /* The price leads the card body now, so it is set as a tag rather than as a line of large text: tinted plate, superscript currency, tabular figures, and the unit ("One two-hour session") tied to it so a number is never stranded without its quantity. Same money treatment as the hero .pricetag. */ .card-price{ margin:0 0 1rem; padding:.7rem .85rem; background:var(--sand); border:1px solid var(--line); border-radius:10px; display:flex; align-items:baseline; gap:.1rem; flex-wrap:wrap; font-family:var(--display); font-weight:800; color:var(--money); font-variant-numeric:tabular-nums; } .card-price .cur{font-size:1.05rem; align-self:flex-start; margin-top:.35em} .card-price .amt{font-size:2rem; letter-spacing:-.02em} .card-price .meta{ font-family:var(--text); font-size:.9rem; font-weight:600; color:var(--muted); margin-left:.55rem; flex:1 1 100%; } /* The unit always takes its own row. Allowed to sit beside the figure it fit on one line for the short units and wrapped for the long ones, so the three price plates in a row came out at two different heights. */ /* An unknown price is a deliberate state, not a disabled one. In muted grey it read as a field that had failed to load; in red-dk it reads as an instruction, which is what it is. */ .card-price.is-call{ font-family:var(--text); font-size:1.12rem; font-weight:700; color:var(--red-dk); letter-spacing:0; align-items:center; } .card-price.is-call .meta{margin-left:0} @media (min-width:420px){ .card-price.is-call .meta{margin-left:.55rem} } /* The list grows to fill, so the CTA sits on the same baseline in all four cards however many lines a selling point wraps to. */ .card-list{flex:1} .card-cta{margin:auto 0 0} /* ---------- teaser --------------------------------------------------------- */ .teaser{ display:grid; gap:1.4rem; align-items:center; grid-template-columns:minmax(0,1fr); background:var(--card); border:1px solid var(--line); border-left:6px solid var(--yellow); border-radius:var(--radius); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow-1); } @media (min-width:820px){ .teaser{grid-template-columns:minmax(0,1fr) auto} } .teaser h2{margin-bottom:.3em} .teaser p{margin:0; color:var(--muted); max-width:60ch} /* ---------- FAQ ------------------------------------------------------------ */ .qa{display:grid; gap:1.4rem; grid-template-columns:minmax(0,1fr)} @media (min-width:900px){ .qa{grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:2.5rem} .qa-head{align-self:start} } .qa-head h2{margin:0} .faq{display:grid; gap:.65rem; max-width:820px} .qa .faq{max-width:none} .faq details{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.2rem .2rem .2rem 0; } .faq summary{ cursor:pointer; list-style:none; padding:.9rem 1.1rem .9rem 1.15rem; font-family:var(--display); font-weight:700; font-size:1.04rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; color:var(--red); font-size:1.4rem; line-height:1; flex:none} .faq details[open] summary::after{content:"–"} .faq p{margin:0 1.15rem 1rem; color:var(--muted)} /* ---------- contact -------------------------------------------------------- */ .contact-grid{ display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr); } /* align-items:start, not stretch. Email and opening hours are unknown, so the details card is short; stretching it to match the taller CTA card left a block of empty white inside a bordered box, which reads as a missing row rather than as a card that simply has less in it. */ @media (min-width:820px){ .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start} } .contact-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-1); } .contact-list{list-style:none; padding:0; margin:0} .contact-list li{display:flex; gap:.75rem; padding:.6rem 0; border-bottom:1px solid var(--line)} .contact-list li:last-child{border-bottom:0} .contact-list .lbl{ font-family:var(--display); font-weight:700; color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; flex:none; width:5.6rem; padding-top:.18rem; } .contact-list .val{min-width:0} /* ---------- credential seal ------------------------------------------------- The one red-tinted band on the site. It closes the page immediately above the footer and states the licence once, in place of the four "why this school" cards that used to interrupt the middle of the page. Because it is the only surface with this ground, it reads as a stamp rather than as another content block — which is the whole reason it is not a card. */ .seal{ background:var(--red-tint); border-top:1px solid rgba(200,22,29,.18); padding:clamp(1.6rem,3.5vw,2.2rem) 0; } .seal-in{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; } .seal-badge{ width:52px; height:52px; border-radius:50%; flex:none; background:var(--paper); color:var(--red); display:grid; place-items:center; box-shadow:inset 0 0 0 2px var(--red), 0 1px 2px rgba(22,18,15,.08); } .seal-badge .ico{width:28px; height:28px} .seal-copy{min-width:0; flex:1 1 22rem} .seal-copy h2{ margin:0 0 .15em; font-size:1.14rem; color:var(--red-dk); text-transform:uppercase; letter-spacing:.05em; } .seal-copy p{margin:0; color:var(--muted); font-size:1rem; max-width:64ch} .tel-big{ font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums; } .tel-big:hover{color:var(--red-dk)} /* ---------- footer --------------------------------------------------------- */ .foot{background:var(--red-dk); color:#F6E7E7; margin-top:0} .foot-in{ width:100%; max-width:var(--wrap); margin-inline:auto; padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,2rem); display:grid; gap:1.8rem; grid-template-columns:minmax(0,1fr); } @media (min-width:760px){ .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1000px){ .foot-in{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))} } .foot h2{font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--yellow); margin:0 0 .8em} .foot ul{list-style:none; padding:0; margin:0} .foot li{margin-bottom:.55rem} .foot a{color:#fff; text-decoration:none} .foot a:hover{text-decoration:underline} .foot-note{color:#F0D6D6; margin:.9rem 0 0; max-width:38ch; font-size:.98rem} .foot-phone{font-family:var(--display); font-weight:800; font-size:1.2rem; font-variant-numeric:tabular-nums} .foot-legal{border-top:1px solid rgba(255,255,255,.22)} .foot-legal p{ width:100%; max-width:var(--wrap); margin-inline:auto; padding:1rem clamp(1rem,4vw,2rem); font-size:.9rem; color:#EFD4D4;text-align: center; } /* ---------- registration container centering -------------------------------- The markup borrows Foundation's .row/.large-collapse naming, but Foundation's own CSS (which is what normally caps .row's width and centers it) was never loaded — only global.css and this file. Without it, .row is a plain full-bleed block, so even with the two panels centered *within* it (below), the whole registration section sits pinned to the left edge of a wide window instead of sitting as a block in the middle of the screen. This gives the outer wrapper itself a width and centers that wrapper — it doesn't touch #registration_left_panel, #registration_panel, .clear, or anything else global.css already owns. :not(.large-collapse) matters here: the flex wrapper below (.row.large- collapse) also carries the plain "row" class, so an unqualified .row rule would land on it too — stacking a SECOND max-width and a SECOND padding-inline on top of the first, shrinking the space available to the two panels below their combined ~730px and forcing them to wrap. !important on the layout properties: this page also loads includes/css/register.css AFTER this file, and its rules are winning ties on things like the gap between the panels (visible as a much bigger gap than the 1.5rem set below) — that file isn't visible to me to fix directly, so this forces our layout to hold regardless of what loads after it. */ .row:not(.large-collapse){ max-width:800px !important; margin-inline:auto !important; padding-inline:clamp(1rem,4vw,2rem) !important; } /* ---------- registration two-column fix ------------------------------------- global.css sizes #registration_left_panel (200px) and #registration_panel (500px) but never constrains the .row.large-collapse div that wraps them. Left off, that wrapper is a plain block at full page width; float:left pins the left panel to its left edge and float:right pins the right panel to its right edge, so the gap between the two panels is literally "page width minus 700px" — huge on any normal screen. This doesn't touch #registration_left_panel/#registration_panel/.clear at all (global.css still owns their width, padding, and divider), it only gives their container something to hug them with. Flex ignores float on its children, so the existing float:left/float:right become no-ops rather than conflicting with this. !important here for the same reason as above: register.css loads after this file and was re-widening the gap between the two panels past the 1.5rem set here. */ .row.large-collapse{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:flex-start !important; gap:1.5rem !important; } /* Combined the two panels are 700px+; anything narrower than that wraps them to a stacked, centered layout instead of overflowing or squeezing. */ @media (max-width:719px){ .row.large-collapse #registration_left_panel{ box-sizing:border-box !important; float:none !important; width:100% !important; border-right:0 !important; margin:0 0 1rem !important; padding:0 0 1rem !important; border-bottom:1px dotted #bbb; } .row.large-collapse #registration_panel{ box-sizing:border-box !important; float:none !important; width:100% !important; } } /* ---------- mobile: registration form fields --------------------------------- global.css floats every field label left and gives .contact_field (and the #refer input) a fixed 250px width — sized for the 500px desktop panel this form was built for. On a phone the row itself is far narrower than 250px + a floated label, so the input doesn't fit beside the label (which is why it already drops to its own line below the label), and then renders at its full fixed width regardless of how narrow the row actually is — punching straight through the row's grey background on the right, which is what shows up in a screenshot. This scopes to the same phone breakpoint as the panel-stacking fix above and only touches sizing/layout: color, borders, font-size, and everything else global.css set on these fields is untouched. #registration_container itself also gets pulled off its hard 500px so nothing upstream of the inputs can force horizontal overflow on a narrow screen either. !important for the same reason as the rules above it: register.css loads after this file and can otherwise win ties on exactly these properties. */ @media (max-width:719px){ #registration_container{ box-sizing:border-box !important; width:100% !important; max-width:500px !important; } #registration_container label{ float:none !important; display:block !important; margin-bottom:.35rem !important; } #registration_container .contact_field, .form_entry .contact_field, #refer input{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; } #registration_container select{ box-sizing:border-box !important; max-width:100% !important; } } /* ---------- mobile: registration box alignment ------------------------------- global.css opens with `*{margin:0 auto;padding:0}` — every element gets auto left/right margins by default. That's invisible on full-width elements (no room to center into), but .registration_subdivision (the "Course Type" and "Profile Information" boxes) has a fixed width:460px and never resets those inherited auto margins. On a phone its container is wider than 460px but narrower than the 500px desktop layout assumed, so the box gets centered while the plain intro paragraphs above it — no fixed width, so nothing to center — stay flush left. That mismatch is the rightward shift. box-sizing is the important addition here: global.css also gives this box padding:10px 20px and a 1px border, and the default box model (content-box) adds those ON TOP of a 100% width instead of fitting inside it — roughly 42px of real overflow. That's not just cosmetic: because .nav and .foot are plain full-width blocks with no width of their own, they stretch to match however wide the page's content actually gets, so this one 42px overflow was what dragged the ENTIRE page — header and footer included — into horizontal scroll on mobile. border-box makes padding and border fit inside the 100% instead of adding to it, which removes the overflow at its source rather than papering over it on .nav/.foot individually. */ @media (max-width:719px){ .registration_subdivision{ box-sizing:border-box !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; } } /* ---------- mobile: horizontal-scroll safety net ----------------------------- This page also loads includes/css/register.css, which I can't see — if it (or anything else on the page) reintroduces a fixed width wider than the screen, the fixes above won't know about it. This doesn't fix a specific element; it just stops any stray overflow from turning into page-wide sideways scroll, as a backstop behind the real fixes above rather than a replacement for them. Scoped to phone widths only. */ @media (max-width:719px){ html, body{ overflow-x:hidden !important; max-width:100% !important; } }