/* Google Language Translator plugin stylesheets, self-hosted. Imported here rather than linked in every page's because the stamper only rewrites the header/footer regions — this way all 15 pages pick them up from one place. They must come first; @import is only valid at the top. NOTE the flag sprites live at assets/css/images/ because this CSS references them as ../images/flags*.png relative to its own css/vendor/ location. Put them anywhere else and the flags render blank. */ @import url("vendor/google-language-translator.css"); @import url("vendor/glt-toolbar.css"); /* ========================================================================== DECAL Scholars — decalscholars.com Static rebuild of the WordPress/Elementor site. One stylesheet, no build step, hand-editable. Values are transcribed from the live site's Elementor "Default Kit" (post-6.css) and the theme's custom_css, not estimated. Sections, in order: 1. Fonts 2. Tokens (colours, type, layout) 3. Reset and base elements 4. Layout helpers 5. Header (announcement bar, utility row, logo, nav, search) 6. Footer ... page sections follow as they are built. NOTE ON SOURCE ORDER: background shorthands reset background-image, so any decorative background-image longhand belongs at the END of this file, after the section rules. Same trap as the caresolutions.com build. ========================================================================== */ /* 1. Fonts ================================================================ Self-hosted, from the same Google files Elementor was loading. Roboto ships as a VARIABLE font: every weight Google serves is the same bytes, so one file per subset covers 100-900. Downloading per-weight gave 17 files / 436 KB that deduplicated to 5 files / 125 KB. Subsets: -3 = latin, -2 = latin-ext, -1 = vietnamese (Roboto only). ------------------------------------------------------------------------ */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/roboto-3.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/roboto-2.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/roboto-1.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Quando"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/quando-2.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Quando"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/quando-1.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 2. Tokens =============================================================== Straight from Elementor's global kit. The hex values are what the site actually renders; the opaque token names (7657b82 etc.) are Elementor's own and are recorded in the project notes if you need to trace one back. ------------------------------------------------------------------------ */ :root { /* Colours */ --navy: #24366E; /* kit "primary" and "accent" */ --blue: #406BAB; /* kit "secondary" — links, hovers */ --text: #000000; /* kit "text" — body copy is pure black here */ --white: #FFFFFF; --yellow: #F7BE00; /* the home page banner bar */ --green: #83BC41; /* NOT caresolutions.com's #7FBE41 */ --green-dark: #0B6637; --grey: #847E7E; --grey-line: #CCCCCC; /* FAQ separators, card borders */ --grey-light: #EDECEC; --highlight: #FDEFBF; /* search term highlight */ --tint-green: #E0EECF; --tint-mint: #E7F0EB; --tint-blue: #CFDAEA; /* Typography — kit "primary" is Quando, everything else Roboto */ --font-display: "Quando", Georgia, serif; --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif; --h-size: 32px; /* kit primary — Quando, verified on live h2 */ --h-line: 44px; --sub-size: 25px; /* kit secondary */ --sub-line: 31px; /* ⚠ 17px/26px, NOT the 20px the kit's "text" slot also lists. The kit gives that slot TWO sizes (17px and 20px) because it carries responsive steps, and an earlier version of this file picked 20 for the desktop default. Live's actual desktop prose is 17px/26px — measured on /educational-counseling/ (list items, emphasis, links, paragraphs all 17/26) and on the homepage's video paragraph. This was nearly invisible: every homepage section sets its own size, so only ONE element on that page inherited the default — and it was wrong. Every inner page would have inherited it. Sister bug to the QR site's Elementor-slot mix-up; see [[feedback-wordpress-migration-playbook]]. 20px w500 IS a real live value, but it belongs to sub-headings ("WATCH:" is Roboto 20px/28px w500) — set those per element, not here. */ --body-size: 17px; --body-line: 26px; --accent-size: 17px; /* kit accent — buttons, small UI */ /* Layout */ --content: 1100px; /* live --content-width */ --gutter: 20px; /* Horizontal inset that lands content on the centred --content column while letting a section's background stay full-bleed; collapses to --gutter once the viewport is narrower than the column. NOTE: percentage padding resolves against the CONTAINING BLOCK, not the element. So this belongs on full-bleed sections only — putting it on something that is itself already centred insets the content twice. That mistake cost three passes on the QR site. */ --side: max(var(--gutter), calc((100% - var(--content)) / 2)); } /* 3. Reset and base ======================================================= Deliberately small. Only what is needed to stop browser defaults fighting the transcribed values. ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-line); color: var(--text); background: var(--white); } img, svg, video { max-width: 100%; height: auto; display: block; } /* Live sets text-decoration: none on links throughout — nav, footer and body copy. Verified on both nav and footer anchors. Underlines are added back only where live actually has one. */ a { color: var(--blue); text-decoration: none; } a:hover, a:focus-visible { color: var(--green); } /* Live sets link colours only inside body copy; nav and buttons override. */ .prose a { color: var(--blue); } .prose a:hover { color: var(--green); } .prose h2 a:hover, .prose h3 a:hover { color: var(--blue); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; margin: 8px 0; /* theme custom_css: .entry-content h1/h2/h3 */ } h1 { font-size: var(--h-size); line-height: var(--h-line); } p { margin: 0.5em 0; } /* theme custom_css: .entry-content p */ ul { list-style-type: disc; } button { font: inherit; } /* Accessibility: visible focus everywhere, and a skip link for keyboard users. Neither exists on the live site; both are additions we make deliberately. */ :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 18px; } .skip-link:focus { left: 0; color: var(--white); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 4. Layout helpers ======================================================= */ .wrap { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } /* 5. Header =============================================================== Three stacked full-bleed rows. Measured against live at a 1280px viewport (content box 1265): row 1 announcement bar 56px #406BAB blue inner padding 0 row 2 logo + buttons 49.3px transparent inner padding 0 4% row 3 primary nav 66px #24366E navy inner padding 0 4% ⚠ LIVE IS INTERNALLY INCONSISTENT and this is reproduced deliberately: the header insets its content by 4% (50.6px at 1265) while the FOOTER centres a 1100px column (82.5px at 1265). So header and footer content do NOT share a left edge on the live site — they are ~32px apart. Kept as-is per the "look is the contract" rule; flagged for David because the QR department manager asked for exactly this kind of thing to be squared up. ------------------------------------------------------------------------ */ .site-header { background: var(--white); } /* row 1 — announcement bar. GREEN #83BC41 with BLACK text. ⚠ An earlier version had this blue. Reading the outer .e-con's background-color returns #406BAB, but the green is painted on a NESTED container inside it — the playbook's "visible colour with no obvious source" trap. Confirmed with document.elementsFromPoint(), which is the only reliable way to settle this class of question. */ .site-alert { background: var(--green); min-height: 56px; display: flex; align-items: center; } .site-alert__inner { width: 100%; padding: 0 4%; } .site-alert p { margin: 0; color: var(--text); font-size: 17px; line-height: 26px; font-weight: 400; text-align: left; } /* "Click here." is BLUE #406BAB on live, not black like the surrounding text. Measured at 1905 — an earlier version had it inheriting --text. */ .site-alert a { color: var(--blue); } .site-alert a:hover, .site-alert a:focus-visible { color: var(--navy); } /* row 2 — logo left, three buttons right. The 30px above and below is live's own margin on this row and accounts for 60 of the header's 231.4px total (56 + 30 + 49.4 + 30 + 66). Without it the header came out 171.3 and every page sat 60px too high. */ .site-brand { margin: 30px 0; } .site-brand__inner { padding: 0 4%; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .site-logo img { width: 372px; height: auto; } .site-actions { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* All three buttons: 36px tall, 14px/500, padding 10px 13px, square corners. One solid navy, two outlined. */ .btn { /* inline-flex + min-height pins every variant to live's 36px regardless of whether it carries a border. The solid button on live has no border and the outlined ones have 1px; letting the border add to the box made ours 38. */ display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); /* Measured at 1905, which is the width David views at. An earlier version used 14px / 10px 13px / height 36 — those are live's values at a 1265 viewport, i.e. a narrower responsive step, and made the buttons visibly too small. 12 + 15 + 12 + 2px border = live's 41px exactly, so the height falls out of the padding and needs no explicit value. */ font-size: 15px; line-height: 15px; font-weight: 500; padding: 12px 24px; border-radius: 0; /* All three carry a 1px border on live — including the solid one, where the border colour matches its own background. */ border: 1px solid transparent; text-align: center; cursor: pointer; white-space: nowrap; } .btn--solid { background: var(--navy); border-color: var(--navy); color: var(--white); /* Live's "Log In" renders 110.5px wide while its own content accounts for only 91.5 (41.5 text + 48 padding + 2 border) — verified, and there is no icon; the markup is just two spans holding the text. The extra 19px comes from its flex parent stretching it, not from anything on the button. The other two buttons match live exactly with identical padding, so rather than distort the shared .btn box model, this reproduces the observable width directly. */ min-width: 110.5px; } .btn--solid:hover, .btn--solid:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--white); } .btn--outline { background: var(--white); border-color: var(--navy); color: var(--navy); } .btn--outline:hover, .btn--outline:focus-visible { background: var(--navy); color: var(--white); } /* row 3 — primary nav on navy */ .site-navbar { background: var(--navy); } .site-navbar__inner { padding: 0 4%; min-height: 66px; display: flex; align-items: center; gap: 20px; } .nav { flex: 1 1 auto; /* Same trap as .nav__search below: with the default min-width: auto, .nav refuses to shrink below its own min-content, so at 1025 the whole