/* ============================================================= tokens.css -- shared design tokens Linked by login.html, dashboard.html and superadmin.html. hey.html deliberately does NOT link this file: it carries its own copy of these values inline (see item 10 of design/css-audit.md). That page is self-contained by design -- local fonts, no external requests, works offline -- and one extra blocking stylesheet on the public landing page is not worth the deduplication. Keep the two in sync by hand; there are eleven values. ============================================================= */ :root { /* Brand. #55b878 is canonical -- it is what and courses.html already use. #69c78c is its light partner, used for hovers and the logo mark. */ --green: #55b878; --green-light: #69c78c; --green-wash: #f7faf8; --green-border: #e4f1e8; /* Department accents. Once the dashboard is live these come from each row's accent_color; these are the seed values and the fallback. */ --dept-languages: #e63946; --dept-business: #2878d7; --dept-art: #740774; --ink: #222; --muted: #707070; --danger: #d64545; --line: #e3e8e5; --shadow-md: 0 10px 30px rgba(31, 41, 55, 0.10); --shadow-lg: 0 22px 50px rgba(31, 41, 55, 0.14); --radius: 14px; --radius-lg: 22px; } /* ============================================================= PHONES -- added 2026-09-07 after auditing the live site at 390px. The layout itself was already sound (no horizontal overflow on any page, grid minimums of 180-260px, no real anywhere). These rules fix what measurement DID find: things that only go wrong when a finger, rather than a mouse, is the input device. index.html and login.html carry an inline copy of this block -- they deliberately do not link this file (see the header above). Change one, change all three. ============================================================= */ /* 1. iOS SAFARI ZOOMS THE WHOLE PAGE when a focused form control is under 16px, then leaves the visitor zoomed in with the layout shifted sideways. It is not a preference or a setting; it is unconditional below 16px. Measured live: the certificate-code field on /verify was 15px, so every person checking a printed certificate on a phone got that jump on the one input the page exists for. Scoped to small screens so the desktop design keeps its intended sizing -- this is a phone fix, not a redesign. !important is deliberate and was arrived at by measurement, not by habit. Every page styles its own fields through a class -- `.cv-lookup input` on /verify, `.ds-field input` in the admin forms -- and a class-qualified selector (0,1,1) beats a bare element selector (0,0,1) no matter which stylesheet it sits in or what media query wraps it. The first version of this rule shipped without !important, and verifying it on the live site showed the input still computing to 15px. There is no specificity this file can reach that beats every page's own class selectors, and the alternative -- editing the field rule in each of nine pages and remembering to do it in the tenth -- is exactly the kind of thing that goes stale. */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } } /* 2. TAP TARGETS. Apple and Google both put the comfortable minimum around 44px; WCAG 2.2 sets a hard floor of 24px. Measured live, the language toggle was 38px on every page, the courses filter chips 39px, and the footer contact links 22px. `pointer: coarse` restricts this to actual touch input, so a mouse-driven desktop keeps its tighter, more compact spacing. Only STANDALONE controls are touched -- a link inside a sentence is deliberately left alone, both because padding it out would break the line box around it and because WCAG exempts inline links in prose for exactly that reason. */ @media (hover: none) and (pointer: coarse) { button, .ds-btn, .chip, .lang-toggle, [role="button"] { min-height: 44px; } /* Stacked link lists (the footer's Instagram / Telegram / email, separated by
). inline-block is what lets vertical padding actually create height on an inline element. */ .contact-links a { display: inline-block; padding-block: 9px; } } /* 3. NOTCHED PHONES -- CONSIDERED AND DELIBERATELY NOT DONE (yet). The obvious move is `padding-inline: env(safe-area-inset-*)` on body. It was left out on purpose: - Both insets are 0 in PORTRAIT, which is how nearly everyone holds a phone on a site like this. It only pays off in landscape. - This site's hero, section bands and footer are full-bleed by design. Body padding would put gutters down both sides of all of them, in landscape, to solve a problem that mostly is not there. If it turns out to matter, the correct fix is per-element (`padding-inline` on the fixed headers only, not on body) and it needs looking at on a real notched device in landscape first -- not shipped blind. */ /* ============================================================= SITE-WIDE ANTI-SAVE PHOTO SHIELD Disables image saving, long-press save menu on iOS/Android, drag-and-drop, and right-click "Save Image As..." on all photos. ============================================================= */ img, svg, .photo-box, .department-image, .event-image, .member-photo, .photo-shield, .formal-badge-emblem-wrap, .cc-avatar, .tp-avatar-shell, .ab-teacher-avatar { -webkit-touch-callout: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; -webkit-user-drag: none !important; user-drag: none !important; } img { pointer-events: none !important; } a:has(> img), button:has(> img), .cc-avatar, .tp-avatar-shell, .department-card, .event { pointer-events: auto !important; }