/* ============================================================ 1st Class Driving School (Apka Desi) — Dev Site design system Scoped under #apk so it ports cleanly back into a WP child-theme template (self-contained, collision-free). Yellow/black brand. ============================================================ */ /* ---- fonts: self-hosted latin subsets (SIL OFL 1.1, see fonts/OFL.txt) ---- These came from Google Fonts: a render-blocking stylesheet on a second origin, then the font files from a third, arriving after first paint. Their late swap reflowed the header (the nav wrapped in the fallback font) and was most of the homepage's 0.2 desktop CLS; the four files were also 58% of its transfer. Same files, same unicode-range, now same-origin and preloaded in each page's (Inter and Oswald). Inter and Oswald are variable fonts: one file covers every weight the site uses. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap; src:url(fonts/inter-latin.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:'Oswald';font-style:normal;font-weight:500 700;font-display:swap; src:url(fonts/oswald-latin.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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url(fonts/ibm-plex-mono-600-latin.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:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap; src:url(fonts/ibm-plex-mono-700-latin.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} :root{ --brand:#EED80F; --brand-deep:#C4A800; --brand-soft:#FBEF9C; --ink:#12110C; --ink-soft:#2A2822; --paper:#FCFAF3; --paper-2:#F4F0E3; --card:#FFFFFF; /* "Route green" — the color of a US/PA highway guide sign. Replaces a generic teal; the --teal/--teal-ink names stay so every inline style="color:var(--teal-ink)" baked into _gen templates repaints for free with no per-template edit. */ --teal:#1C6B4A; --teal-ink:#0F4A31; --muted:#6E6B5E; --line:#E4DFCF; --ok:#177A42; --shadow:0 1px 2px rgba(18,17,12,.04), 0 8px 30px rgba(18,17,12,.07); --shadow-lg:0 14px 40px rgba(18,17,12,.12); /* .trust's number color: matched to --brand by default since .trust's own background (var(--ink)) is dark in this theme; redefined per-theme below wherever that background inverts to light instead. */ --ink-accent:var(--brand); /* Logo mark ink: fixed brand tones from the logo/ style guide, not the generic --ink token, so the mark reads correctly against whichever ground it sits on (header = --paper ground, footer = --ink ground) without being recoloured per section. --logo-accent reuses the site's existing --brand yellow in place of the guide's default red bead. */ --logo-ink:#0E4034; --logo-ink-inv:#F3F2F2; --logo-accent:var(--brand); /* "Apka Desi" highlight ink: raw --brand yellow is unreadable as text on --paper (contrast ~1.4:1) — this is the same "flip with the ground" shape as --teal-ink, deep in light mode, full brand yellow once --paper goes dark. Used only where the mark sits directly on --paper (the header wordmark); the footer's "Apka Desi" sits on --ink instead and already has the right token for that: --ink-accent. */ --brand-ink:#7A6300; --maxw:1160px; --r:16px; /* Type system: Oswald (condensed, FHWA-signage DNA) carries headings, nav, buttons and labels — the "signage" register. Inter carries paragraph copy across 100+ content pages. IBM Plex Mono marks numbers that read like a printed form: prices, phone digits, stat counters. */ --display:'Oswald',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* PA route-marker silhouette (the "keystone" shape on every PA road sign) — the page's one signature device. Applied to icon tiles, eyebrow tags and other short English-only labels; never to running text or non-Latin script (clipping risk on tall diacritics). */ --keystone:polygon(0 0,100% 0,84% 100%,16% 100%); /* same silhouette, gentler taper — for single-line text badges, where the box is too short for a 16% inset to clear ascenders/descenders */ --keystone-tag:polygon(0 0,100% 0,95% 100%,5% 100%); } /* Three color bugs found together, all the same shape: a themed color with no dark-mode variant, unlike every other one defined above. --teal-ink (#0F4A31, near-black forest green) is unreadable against the dark --card/--paper it sits on in dark mode — it's the color behind every inline style="color:var(--teal-ink)" baked into _gen/generate.js (sidebar "Other services" links, "how it works" steps, prose links, etc.), so fixing the variable repaints all of them with no per-template edit. --ok (#1B8A4B) has the same problem at font-weight:800 in the pricing comparison table's "yes" column (table.cmp td.y), against dark --paper-2. --ink-accent is different in kind: it's for text that sits directly on a var(--ink)-colored background (.trust, footer.site) — an intentional dark ribbon in light mode that becomes a pale one in dark mode since --ink itself inverts. Text there needs to invert with it, not just get lighter. */ @media (prefers-color-scheme:dark){ :root{ --paper:#111009; --paper-2:#17150D; --card:#1D1A10; --ink:#FAF6E6; --ink-soft:#E6E1CC; --line:#2E2A1B; --muted:#A7A08A; --brand-soft:#3A3410; --ok:#34D399; --teal:#34D399; --teal-ink:#6EE7B7; --ink-accent:#12110C; --logo-ink:#F3F2F2; --logo-ink-inv:#0E4034; --brand-ink:#EED80F; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5); --shadow-lg:0 16px 44px rgba(0,0,0,.6);} } :root[data-theme="dark"]{ --paper:#111009; --paper-2:#17150D; --card:#1D1A10; --ink:#FAF6E6; --ink-soft:#E6E1CC; --line:#2E2A1B; --muted:#A7A08A; --brand-soft:#3A3410; --ok:#34D399; --teal:#34D399; --teal-ink:#6EE7B7; --ink-accent:#12110C; --logo-ink:#F3F2F2; --logo-ink-inv:#0E4034; --brand-ink:#EED80F; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5); --shadow-lg:0 16px 44px rgba(0,0,0,.6);} :root[data-theme="light"]{ --paper:#FCFAF3; --paper-2:#F4F0E3; --card:#FFFFFF; --ink:#12110C; --ink-soft:#2A2822; --line:#E4DFCF; --muted:#6E6B5E; --brand-soft:#FBEF9C; --ok:#177A42; --teal:#1C6B4A; --teal-ink:#0F4A31; --ink-accent:var(--brand); --logo-ink:#0E4034; --logo-ink-inv:#F3F2F2; --brand-ink:#7A6300; --shadow:0 1px 2px rgba(18,17,12,.04), 0 8px 30px rgba(18,17,12,.07); --shadow-lg:0 14px 40px rgba(18,17,12,.12);} #apk *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans); line-height:1.6;-webkit-font-smoothing:antialiased;} #apk .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} #apk a{color:inherit} /* height:auto, or the stamped height="" attribute survives the max-width shrink: a 1024x1024 post image rendered 288x1024 on a phone (66 of 67 post images were distorted on mobile). The width/height attributes still reserve the right aspect ratio before the file loads, so nothing shifts. */ #apk img{max-width:100%;height:auto} #apk h1,#apk h2,#apk h3{margin:0;text-wrap:balance;font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.04} #apk nav.main a,#apk .drawer-panel a,#apk .btn,#apk footer h4,#apk footer .fh,#apk .brandmark .bm-txt b, #apk footer .fbrand b,#apk .plan h3,#apk .side-card h3,#apk .branch .pin{font-family:var(--display)} /* ---- eyebrow: the page's signature tag, cut to the PA route-marker silhouette. One rule, ~100 pages — every phero section on the site wears the same small keystone. ---- */ #apk .eyebrow{ display:inline-flex;align-items:center; font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:#12110C;background:var(--brand); padding:7px 20px;clip-path:var(--keystone-tag); } /* ---- buttons ---- */ #apk .btn{display:inline-flex;align-items:center;gap:.5em;border:0;cursor:pointer; font-weight:600;font-size:.98rem;letter-spacing:.02em;text-transform:uppercase;padding:.85em 1.5em;border-radius:999px; text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;white-space:nowrap; max-width:100%;flex-wrap:wrap;justify-content:center;text-align:center} /* long button labels wrap instead of widening the page on small screens */ @media (max-width:560px){#apk .btn{white-space:normal}} /*