/* Theme Name: Northumbria Theme URI: https://github.com/itsdiea/northumbria-store Author: Diea Author URI: https://github.com/itsdiea Description: Card / off-black theme for the QFBA × Northumbria University Qatar graduation store. Mobile-first, bilingual EN/AR, custom WooCommerce front-page with interactive hotspots, degree toggle, multi-step order flow with OTP verification (WATI + SendGrid) and SkipCash checkout. Implements the V3 "Card / Off-black" design from Claude Design. Version: 0.7.0 Requires at least: 6.8 Tested up to: 6.9 Requires PHP: 8.0 License: GPL v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: northumbria Tags: ecommerce, woocommerce, custom-front-page, mobile-first, rtl-language-support */ /* ─── Design tokens — light by default; body.theme-dark flips ────────── * Token names (`--c-cream`, `--c-charcoal`, `--c-offblack`, `--c-deep`) * are now semantic placeholders, not literal colour descriptions: * --c-offblack → page background * --c-charcoal → card surface * --c-deep → inner tile / input bg * --c-cream → primary text * The literal values flip between light and dark mode via the override * block on `body.theme-dark` further down. */ :root { --c-black: #000000; --c-offblack: #EFEFEF; --c-charcoal: #FFFFFF; --c-deep: #F5F5F5; --c-cream: #0A0A0A; --c-paper: #FBF8F2; --c-orange: #F26B3A; --c-orange-deep: #D9522A; --c-success: #1E8A4E; /* used for the order-confirmation tile */ --c-success-soft: rgba(30, 138, 78, 0.10); --c-muted: rgba(10, 10, 10, 0.55); --c-muted-soft: rgba(10, 10, 10, 0.40); --hairline: rgba(0, 0, 0, 0.10); --hairline-strong:rgba(0, 0, 0, 0.16); --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif; --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; --r-card: 14px; /* outer cards */ --r-inner: 12px; /* inner cards (item tile, set tile) */ --r-photo: 10px; /* photo container inside hero */ --r-pill: 999px; /* chips, language pill, primary buttons */ --max-content: 460px; /* mobile-first cap; design target is 390 */ } /* ─── Dark mode override ──────────────────────────────────────────────── * Activated by adding `theme-dark` to . All visual tokens flip; * everything that uses the tokens (cards, text, borders, hairlines) * follows automatically. The few non-token spots are handled below. */ body.theme-dark { --c-offblack: #141414; --c-charcoal: #1F1F1F; --c-deep: #0E0E0E; --c-cream: #F4F0E8; --c-muted: rgba(244, 240, 232, 0.55); --c-muted-soft: rgba(244, 240, 232, 0.40); --hairline: rgba(255, 255, 255, 0.08); --hairline-strong:rgba(255, 255, 255, 0.14); } /* Logo is a black-on-transparent PNG; invert it on dark so the wordmark * reads against the dark page background. */ body.theme-dark .site-header__logo img { filter: invert(1) hue-rotate(180deg); } /* Photo placeholder stripes: dark version uses light tints. */ body.theme-dark .photo { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 8px, rgba(255,255,255,0.02) 8px 16px); } body.theme-dark .photo--has-image { background-image: var(--photo-image); } /* ─── Reset / base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--c-offblack); color: var(--c-cream); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } [lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } #wpadminbar { background: #000 !important; } /* ─── Layout primitives ─────────────────────────────────────────────── */ .shell { min-height: 100vh; margin: 0 auto; max-width: var(--max-content); background: var(--c-offblack); position: relative; } .section { padding: 8px 16px 16px; } .section--first { padding-top: 0; } .row { display: flex; align-items: center; } .row--between { justify-content: space-between; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .muted { color: var(--c-muted); } .accent { color: var(--c-orange); } /* ─── Mono utility ──────────────────────────────────────────────────── */ .mono { font-family: var(--font-mono); font-weight: 500; } .mono-tag { font: 500 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); } .mono-num { font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; } [lang="ar"] .mono-tag { text-transform: none; letter-spacing: 0; } /* Section titles — bold, slightly larger, dark text on light card. */ .items-section__title, .summary__title, .bag__head, .pickup__title, .sizeguide__th, .faq__title, .orderform__head { font: 700 12px/1.3 var(--font-mono); letter-spacing: 0.14em; color: var(--c-cream); /* same as body text in light mode: #0A0A0A */ } [lang="ar"] .items-section__title, [lang="ar"] .summary__title, [lang="ar"] .bag__head, [lang="ar"] .pickup__title, [lang="ar"] .faq__title, [lang="ar"] .orderform__head { letter-spacing: 0; font-family: var(--font-arabic); } /* ─── Header ────────────────────────────────────────────────────────── */ /* Frosted-glass floating-island sticky header. Sits 12px inset from the * shell edges (so all four corners can be rounded) and 12px from the * viewport top when scrolled. The `saturate(180%)` is the classic * iOS-Safari trick that keeps colors vibrant through the blur. */ .site-header { position: sticky; top: 12px; z-index: 30; margin: 12px 12px 0; background: rgba(239, 239, 239, 0.72); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 14px 16px 12px; display: flex; align-items: center; justify-content: space-between; } @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--c-offblack); } } body.theme-dark .site-header { background: rgba(20, 20, 20, 0.72); } @supports not (backdrop-filter: blur(1px)) { body.theme-dark .site-header { background: var(--c-offblack); } } .site-header__logo { display: inline-flex; align-items: center; } .site-header__logo img, .site-header__logo svg { height: 26px; width: auto; max-width: 70vw; display: block; } .site-header__lang, .site-header__theme { background: transparent; border: 1px solid var(--hairline); color: var(--c-cream); font: 500 11px/1 var(--font-sans); padding: 6px 10px; border-radius: var(--r-pill); letter-spacing: 0.04em; cursor: pointer; } .site-header__lang:hover, .site-header__theme:hover { background: var(--c-charcoal); } .site-header__actions { display: inline-flex; align-items: center; gap: 6px; } .site-header__theme { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .site-header__theme svg { width: 16px; height: 16px; } /* Show the sun icon when dark mode is on (click → switch to light); * show the moon icon when light mode is on (click → switch to dark). */ .site-header__theme .sun { display: none; } body.theme-dark .site-header__theme .sun { display: block; } body.theme-dark .site-header__theme .moon { display: none; } /* ─── Section rhythm ────────────────────────────────────────────────── * * Every major section has 32px top + 32px bottom padding so titles and * cards have clear breathing room from whatever sits above. Title * horizontal margin is 0 so the title's start edge aligns exactly with * the cards/tiles that follow (both sit at the section's 16px gutter). */ /* Top padding gives clearance between the (now floating) header and the * hero card — and keeps the eyebrow chip from sliding under the header * during the first few pixels of scroll. */ .hero-section { padding: 24px 16px 32px; } .items-section, .summary, .pickup, .sizeguide, .orderform, .faq { padding: 32px 16px 32px; } .items-section__title, .summary__title, .pickup__title, .bag__head, .faq__title { margin: 0 0 14px; /* flush with tiles/cards below */ } /* Card surfaces (summary, pickup, orderform, faq item) — give the * heading inside more headroom so it doesn't kiss the top border. */ .summary__card, .pickup__card, .orderform__card { padding: 22px 22px 20px; } /* Items grid — keep tiles from kissing each other. */ .items-grid { gap: 12px; } /* FAQ items spacing. */ .faq__item + .faq__item { margin-top: 8px; } /* ─── Hero card (eyebrow + title + degree toggle + photo + chip row) ─── */ .hero-card { background: var(--c-charcoal); border-radius: var(--r-card); border: 1px solid var(--hairline); overflow: hidden; /* No margin — the .hero-section wrapper provides the 16px gutter, so * this card lines up exactly with .items-section, .summary, .pickup, * etc. (all of which use the same 16px section padding). */ } /* Degree toggle when nested inside the hero card */ .hero-card__degree { padding: 14px 22px 0; } .hero-card__degree .degree-toggle { background: var(--c-deep); /* light grey pill against the white card */ } .hero-card__head { padding: 20px 22px 0; } .hero-card__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(242, 107, 58, 0.18); color: var(--c-orange); font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; } .hero-card__eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } [lang="ar"] .hero-card__eyebrow { text-transform: none; letter-spacing: 0; } .hero-card__title { font: 500 32px/1.05 var(--font-sans); letter-spacing: -0.015em; margin: 14px 0 6px; color: var(--c-cream); } [lang="ar"] .hero-card__title { font-size: 30px; letter-spacing: 0; } .hero-card__subtitle { font: 400 14px/1.45 var(--font-sans); color: var(--c-muted); margin: 0; } /* ─── Photo zone (inside hero card) with outline pins ───────────────── */ .photo { position: relative; /* Matches the product photos' native 2:3 portrait ratio so the head / * cap aren't cropped by `cover`. If a future photo has a different * aspect, `background-position: center top` biases toward keeping the * head in frame at the expense of the lower body. */ aspect-ratio: 2 / 3; margin: 18px 16px 16px; border-radius: var(--r-photo); border: 1px solid var(--hairline); overflow: hidden; background-color: var(--c-deep); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 8px, rgba(0,0,0,0.02) 8px 16px); } .photo--has-image { background-image: var(--photo-image); background-size: cover; background-position: center top; background-repeat: no-repeat; } .photo__placeholder-tag { position: absolute; top: 12px; inset-inline-start: 12px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted-soft); padding: 4px 7px; border: 1px dashed var(--hairline); border-radius: 3px; } .photo__hint { position: absolute; bottom: 12px; inset-inline-start: 12px; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.65); color: rgba(255, 255, 255, 0.92); font: 500 10px/1 var(--font-sans); letter-spacing: 0.04em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ─── Outline pin (V3) — circular pill with item icon ───────────────── */ /* Pins overlay the product photo (usually a dark gown), so the icon stays * white-on-dark for legibility. The dark backdrop is also visible against * the light placeholder stripe pattern, so the pin remains distinguishable * even before a real photo loads. */ .pin { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1.5px solid rgba(255, 255, 255, 0.85); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transition: width .15s, height .15s, background .15s, border-color .15s, box-shadow .15s; padding: 0; } .pin svg { width: 14px; height: 14px; transition: width .15s, height .15s; } .pin[aria-pressed="true"] { width: 38px; height: 38px; background: var(--c-orange); border-color: var(--c-orange); box-shadow: 0 0 0 6px rgba(242, 107, 58, 0.30); } .pin[aria-pressed="true"] svg { width: 18px; height: 18px; } /* ─── Item chip row (under photo, inside hero card) ─────────────────── */ .chip-row { padding: 0 16px 18px; display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: transparent; color: var(--c-muted); font: 500 12px/1 var(--font-sans); cursor: pointer; } .chip svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--c-muted); } .chip[aria-pressed="true"], .chip:hover { border-color: var(--c-orange); background: rgba(242, 107, 58, 0.15); color: var(--c-cream); } .chip[aria-pressed="true"] svg, .chip:hover svg { color: var(--c-orange); } /* ─── Active item card (drawer slot) ────────────────────────────────── */ .drawer { /* Inset 12px on the sides so the card edges line up exactly with the * floating header above. 8px top + 24px bottom keep it clear of the * sections it sits between. */ margin: 8px 12px 24px; background: var(--c-charcoal); border-radius: var(--r-card); padding: 20px 22px; border: 1px solid rgba(242, 107, 58, 0.4); display: flex; flex-direction: column; gap: 14px; } .drawer__head { display: flex; align-items: center; gap: 12px; } .drawer__icon, .drawer__photo { width: 56px; height: 56px; border-radius: var(--r-photo); background: var(--c-deep); border: 1px solid var(--hairline); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .drawer__icon { color: var(--c-orange); } .drawer__icon svg { width: 22px; height: 22px; } .drawer__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .drawer__head-text { flex: 1; min-width: 0; } .drawer__name { font: 500 18px/1.15 var(--font-sans); color: var(--c-cream); margin: 0; } .drawer__sub { font: 400 12px/1.3 var(--font-sans); color: var(--c-muted); margin-top: 2px; } .drawer__close { background: transparent; border: 0; color: var(--c-muted); font: 300 22px/1 var(--font-sans); cursor: pointer; padding: 4px; } .drawer__desc { font: 400 14px/1.55 var(--font-sans); color: var(--c-muted); margin: 0; } .drawer__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--hairline); } .drawer__price { font: 500 17px/1 var(--font-sans); color: var(--c-cream); } .drawer__price-unit { font: 500 11px/1 var(--font-mono); color: var(--c-muted); margin-inline-start: 4px; } .drawer__add { border: 0; padding: 12px 18px; border-radius: var(--r-pill); background: var(--c-cream); color: var(--c-offblack); font: 500 13px/1 var(--font-sans); cursor: pointer; } .drawer__add[aria-pressed="true"] { background: var(--hairline-strong); color: var(--c-muted); } /* ─── Variation (size) selector ─────────────────────────────────────── */ .sizes { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; } .sizes__btn { border: 1px solid var(--hairline); background: transparent; color: var(--c-cream); padding: 8px 14px; border-radius: var(--r-pill); font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em; cursor: pointer; min-width: 44px; text-align: center; } .sizes__btn[aria-pressed="true"] { border-color: var(--c-orange); color: var(--c-orange); background: rgba(242, 107, 58, 0.12); } /* ─── Degree toggle ─────────────────────────────────────────────────── */ .degree-section { padding: 0 16px 16px; } .degree-label { margin-bottom: 8px; } .degree-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--c-charcoal); border-radius: var(--r-pill); border: 1px solid var(--hairline); padding: 4px; } .degree-toggle__btn { background: transparent; color: var(--c-muted); padding: 10px 14px; font: 500 12px/1 var(--font-sans); border-radius: var(--r-pill); cursor: pointer; text-align: center; border: 0; } .degree-toggle__btn[aria-pressed="true"] { background: var(--c-cream); color: var(--c-offblack); } /* ─── All-pieces — full product cards ────────────────────────────────── * One card per product, stacked vertically. Each card carries * everything for selection (size pills inline, Add/Added button). * No drawer — size + add happen in-card. */ .items-section__title { margin-bottom: 12px; padding: 0 4px; } .item-cards { display: flex; flex-direction: column; gap: 14px; } .item-card { background: var(--c-charcoal); border: 1px solid var(--c-orange); border-radius: 18px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; color: var(--c-cream); position: relative; } .item-card--degree-hidden { display: none; } /* Head row: thumbnail + heading text + close-zoom button */ .item-card__head { display: flex; align-items: flex-start; gap: 12px; } .item-card__thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; background: var(--c-deep); border: 1px solid var(--hairline); overflow: hidden; display: flex; align-items: center; justify-content: center; } .item-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .item-card__icon { color: var(--c-muted); } .item-card__heading { flex: 1; display: flex; flex-direction: column; gap: 2px; } .item-card__name { font: 600 16px/1.2 var(--font-sans); color: var(--c-cream); } .item-card__short { font: 400 13px/1.35 var(--font-sans); color: var(--c-muted); } .item-card__zoom { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 1px solid var(--hairline); color: var(--c-muted); font: 300 18px/26px var(--font-sans); cursor: pointer; text-align: center; padding: 0; transition: background .12s, color .12s, border-color .12s; } .item-card__zoom:hover { background: var(--c-deep); color: var(--c-cream); border-color: var(--hairline-strong); } .item-card__desc { font: 400 13px/1.55 var(--font-sans); color: var(--c-muted); margin: 0; } /* Size pills — outlined, brand fill when active */ .item-card__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .item-card__size { font: 500 13px/1 var(--font-sans); padding: 8px 16px; border-radius: 999px; background: transparent; border: 1px solid var(--hairline-strong); color: var(--c-cream); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .item-card__size:hover { background: var(--c-deep); } .item-card__size[aria-pressed="true"] { background: var(--c-cream); color: var(--c-charcoal); border-color: var(--c-cream); } /* Foot row: price (left) + add button (right) */ .item-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .item-card__price { font: 700 22px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--c-cream); } .item-card__price-unit { font: 600 11px/1 var(--font-mono); letter-spacing: 0.08em; margin-inline-start: 6px; color: var(--c-muted); } .item-card__add { font: 500 14px/1 var(--font-sans); padding: 12px 22px; border-radius: 999px; background: var(--c-cream); /* off-black in light mode, cream in dark */ color: var(--c-charcoal); border: 0; cursor: pointer; transition: background .12s, color .12s, opacity .12s; } .item-card__add:hover:not([disabled]) { opacity: 0.88; } .item-card__add[disabled] { opacity: 0.45; cursor: not-allowed; } .item-card__add[aria-pressed="true"] { /* Selected state — quiet gray pill so the card visually reads as "done" */ background: var(--c-deep); color: var(--c-muted); cursor: pointer; } .item-card[aria-pressed="true"] { border-color: var(--c-orange); background: var(--c-charcoal); } /* ─── Order summary ─────────────────────────────────────────────────── */ /* .summary padding lives in the §section-rhythm block at the top of this file */ .summary__card { background: var(--c-charcoal); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 18px 20px; } .summary__title { /* base style — overridden by the bolder rule further down */ text-transform: uppercase; margin-bottom: 14px; } [lang="ar"] .summary__title { text-transform: none; letter-spacing: 0; } .summary__empty { font: 400 13px/1.5 var(--font-sans); color: var(--c-muted); padding: 8px 0; } .summary__row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font: 400 14px/1.3 var(--font-sans); color: var(--c-cream); } .summary__row-name { display: flex; align-items: center; gap: 10px; } .summary__row-remove { background: transparent; border: 0; cursor: pointer; color: var(--c-muted); font: 400 16px/1 var(--font-sans); } .summary__row-price { font: 500 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; } .summary__divider { height: 1px; background: var(--hairline); margin: 10px 0; } .summary__line { display: flex; justify-content: space-between; padding: 4px 0; font: 400 13px/1.4 var(--font-sans); color: var(--c-muted); } .summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--hairline); font: 500 17px/1 var(--font-sans); color: var(--c-cream); } .summary__total-num { font-variant-numeric: tabular-nums; } .summary__total-unit { font: 500 11px/1 var(--font-mono); color: var(--c-muted); letter-spacing: 0.1em; margin-inline-start: 4px; } /* ─── Pickup block ──────────────────────────────────────────────────── */ /* .pickup padding lives in the §section-rhythm block at the top of this file */ .pickup__card { background: var(--c-charcoal); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 18px 20px; } .pickup__title { text-transform: uppercase; margin-bottom: 12px; } [lang="ar"] .pickup__title { text-transform: none; letter-spacing: 0; } .pickup__where { font: 500 16px/1.3 var(--font-sans); color: var(--c-cream); } .pickup__addr { font: 400 13px/1.4 var(--font-sans); color: var(--c-muted); margin-top: 4px; } .pickup__dates { margin-top: 14px; display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--r-photo); overflow: hidden; } .pickup__date { display: grid; grid-template-columns: 0.6fr 1fr 1.2fr; padding: 11px 14px; font: 400 13px/1.2 var(--font-sans); color: var(--c-cream); align-items: center; border-bottom: 1px solid var(--hairline); } .pickup__date:last-child { border-bottom: 0; } .pickup__date-day { color: var(--c-muted); font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; } .pickup__date-time { color: var(--c-muted); font-variant-numeric: tabular-nums; text-align: end; } .pickup__note { font: 400 12px/1.4 var(--font-sans); color: var(--c-muted); margin-top: 10px; } /* ─── Size guide accordion ──────────────────────────────────────────── */ /* .sizeguide padding lives in the §section-rhythm block at the top of this file */ .sizeguide__toggle { width: 100%; text-align: inherit; background: var(--c-charcoal); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 16px 20px; color: var(--c-cream); display: flex; justify-content: space-between; align-items: center; font: 500 15px/1 var(--font-sans); cursor: pointer; } .sizeguide__plus { font: 300 22px/1 var(--font-sans); color: var(--c-muted); transition: transform .2s; } .sizeguide__toggle[aria-expanded="true"] .sizeguide__plus { transform: rotate(45deg); } .sizeguide__panel { background: var(--c-charcoal); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 16px 20px; margin-top: 6px; } .sizeguide__panel[hidden] { display: none; } .sizeguide__intro { font: 400 13px/1.55 var(--font-sans); color: var(--c-muted); margin: 0 0 14px; } .sizeguide__table { display: grid; grid-template-columns: 0.7fr 1.3fr 1fr; } .sizeguide__th { font: 500 10px/1 var(--font-mono); letter-spacing: 0.10em; color: var(--c-muted); padding: 8px 10px; background: var(--c-deep); border-bottom: 1px solid var(--hairline); text-transform: uppercase; } [lang="ar"] .sizeguide__th { text-transform: none; letter-spacing: 0; } .sizeguide__td { padding: 11px 10px; border-bottom: 1px solid var(--hairline); color: var(--c-cream); font: 400 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; } .sizeguide__td--mono { font: 500 13px/1 var(--font-mono); } /* ─── Multi-step order form ─────────────────────────────────────────── */ /* .orderform padding lives in the §section-rhythm block at the top of this file */ .orderform__card { background: var(--c-charcoal); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 20px; } .orderform__head { font: 500 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); } [lang="ar"] .orderform__head { text-transform: none; letter-spacing: 0; } .orderform__steps { display: flex; gap: 4px; margin: 14px 0 18px; } .orderform__step-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--hairline); } .orderform__step-bar[data-state="current"] { background: var(--c-cream); } .orderform__step-bar[data-state="done"] { background: var(--c-orange); } .orderform__step-meta { font: 500 11px/1 var(--font-mono); color: var(--c-muted); letter-spacing: 0.06em; margin-bottom: 10px; } .orderform__step-title { font: 500 18px/1.2 var(--font-sans); color: var(--c-cream); margin: 0 0 4px; } .orderform__step-intro { font: 400 13px/1.5 var(--font-sans); color: var(--c-muted); margin: 0 0 18px; } .orderform__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .orderform__label { font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); } [lang="ar"] .orderform__label { text-transform: none; letter-spacing: 0; } .orderform__input { background: var(--c-deep); border: 1px solid var(--hairline); border-radius: 8px; padding: 14px; font: 400 15px/1 var(--font-sans); color: var(--c-cream); outline: none; } .orderform__input:focus { border-color: var(--c-orange); } .orderform__otp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 280px; /* keeps cells comfortably square on mobile */ margin: 0 auto; } .orderform__otp-cell { background: var(--c-deep); border: 1px solid var(--hairline); border-radius: 10px; padding: 18px 0; font: 500 28px/1 var(--font-mono); color: var(--c-cream); text-align: center; outline: none; width: 100%; font-variant-numeric: tabular-nums; } .orderform__otp-cell:focus { border-color: var(--c-orange); } .orderform__buttons { display: flex; gap: 8px; margin-top: 16px; } .orderform__btn { padding: 14px 18px; cursor: pointer; border-radius: var(--r-pill); font: 500 13px/1 var(--font-sans); border: 0; flex: 1; } .orderform__btn--primary { background: var(--c-cream); color: var(--c-offblack); } .orderform__btn--primary[disabled] { background: var(--hairline); color: var(--c-muted); cursor: not-allowed; } .orderform__btn--secondary { background: transparent; color: var(--c-cream); border: 1px solid var(--hairline); } .orderform__btn--full { width: 100%; } .orderform__note { font: 400 11px/1.4 var(--font-sans); color: var(--c-muted); margin-top: 12px; text-align: center; } .orderform__success { padding: 14px; margin-top: 14px; border: 1px solid var(--c-success); background: var(--c-success-soft); border-radius: 10px; font: 400 13px/1.45 var(--font-sans); color: var(--c-cream); } .orderform__success strong { color: var(--c-success); } .orderform__spinner { width: 18px; height: 18px; border: 2px solid rgba(30, 138, 78, 0.25); border-top-color: var(--c-success); border-radius: 50%; animation: nu-spin 0.9s linear infinite; flex-shrink: 0; /* Promote to its own compositor layer — keeps the 60fps rotation * off the main paint path. (The IDE flags `transform` in keyframes * but on a circular element it's pure compositor work, no paint.) */ will-change: transform; } @keyframes nu-spin { to { transform: rotate(360deg); } } /* ─── In-page SkipCash payment modal ─────────────────────────────────── */ .skipcash-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; } .skipcash-modal[hidden] { display: none; } .skipcash-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .skipcash-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 480px; height: min(720px, 88vh); background: var(--c-charcoal); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .skipcash-modal__header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; } .skipcash-modal__title { font: 500 14px/1 var(--font-sans); color: var(--c-cream); letter-spacing: 0.02em; } .skipcash-modal__close { background: transparent; border: 0; color: var(--c-muted); font: 300 28px/1 var(--font-sans); cursor: pointer; padding: 0 4px; line-height: 1; } .skipcash-modal__close:hover { color: var(--c-cream); } .skipcash-modal__popout { display: inline-flex; align-items: center; color: var(--c-muted); text-decoration: none; padding: 4px; border-radius: 6px; transition: color .15s, background .15s; } .skipcash-modal__popout:hover { color: var(--c-orange); background: rgba(242, 107, 58, 0.10); } .skipcash-modal__status { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font: 400 13px/1.4 var(--font-sans); color: var(--c-muted); border-bottom: 1px solid var(--hairline); } .skipcash-modal__status[hidden] { display: none; } .skipcash-modal__frame { flex: 1; width: 100%; border: 0; background: var(--c-charcoal); } .orderform__success a { color: var(--c-success); text-decoration: underline; } .orderform__error { padding: 14px; margin-top: 14px; border: 1px solid #ff5a5f; background: rgba(255, 90, 95, 0.08); border-radius: 10px; font: 400 13px/1.45 var(--font-sans); color: var(--c-cream); } .orderform__resend { background: transparent; border: 0; color: var(--c-orange); font: 500 12px/1 var(--font-sans); cursor: pointer; padding: 8px 0; text-decoration: underline; } .orderform__resend[disabled] { color: var(--c-muted); text-decoration: none; cursor: not-allowed; } .orderform__review { background: var(--c-deep); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; } .orderform__review-row { display: flex; justify-content: space-between; font: 400 13px/1.4 var(--font-sans); padding: 6px 0; color: var(--c-cream); } .orderform__review-row span:first-child { color: var(--c-muted); } .orderform__review-row--total { border-top: 1px solid var(--hairline); margin-top: 6px; padding-top: 10px; font-weight: 500; font-size: 15px; } /* ─── FAQ accordion ─────────────────────────────────────────────────── */ /* .faq padding lives in the §section-rhythm block at the top of this file */ .faq__title { text-transform: uppercase; margin: 12px 4px 14px; } [lang="ar"] .faq__title { text-transform: none; letter-spacing: 0; } .faq__item { background: var(--c-charcoal); border: 1px solid var(--hairline); border-radius: var(--r-inner); padding: 0 16px; margin-bottom: 6px; } .faq__toggle { width: 100%; text-align: inherit; padding: 14px 0; cursor: pointer; background: transparent; border: 0; color: var(--c-cream); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .faq__q { font: 500 14px/1.4 var(--font-sans); flex: 1; } .faq__plus { font: 300 20px/1 var(--font-sans); color: var(--c-muted); transition: transform .2s; } .faq__toggle[aria-expanded="true"] .faq__plus { transform: rotate(45deg); } .faq__a { font: 400 13px/1.55 var(--font-sans); color: var(--c-muted); margin: 0 0 14px; max-width: 320px; } .faq__a[hidden] { display: none; } /* ─── Trust strip ───────────────────────────────────────────────────── */ .trust { padding: 8px 16px 8px; } .trust__line { font: 400 12px/1.4 var(--font-sans); color: var(--c-muted); display: flex; align-items: center; gap: 10px; padding: 4px 0; } .trust__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-muted); flex-shrink: 0; } /* ─── Social strip (above footer) — compact lockup ───────────────── */ .social-strip { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 16px 22px; } .social-strip__logo { height: 24px; width: auto; max-width: 70%; opacity: 0.55; /* secondary lockup — don't compete with the header logo */ display: block; } body.theme-dark .social-strip__logo { filter: invert(1) hue-rotate(180deg); } .social-strip__icons { display: flex; justify-content: center; align-items: center; gap: 8px; } .social-strip__link { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 1px solid var(--hairline); color: var(--c-muted); text-decoration: none; transition: transform .15s, color .15s, border-color .15s, background .15s; } .social-strip__link svg { width: 14px; height: 14px; display: block; } .social-strip__link:hover, .social-strip__link:focus-visible { color: var(--c-orange); border-color: var(--c-orange); background: rgba(242, 107, 58, 0.10); transform: translateY(-1px); outline: none; } /* ─── Footer (V3 — centered, single line) ───────────────────────────── */ .site-footer { padding: 28px 16px 36px; text-align: center; color: var(--c-muted); font: 400 11px/1.5 var(--font-sans); } .site-footer__sub { opacity: 0.5; margin-top: 4px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.10em; } [lang="ar"] .site-footer__sub { letter-spacing: 0; } /* ─── Lightbox (tile zoom) ──────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; padding: 24px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .lightbox[hidden] { display: none; } .lightbox__img { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; background: #fff; border-radius: 14px; display: block; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); } .lightbox__close { position: absolute; top: 16px; inset-inline-end: 16px; width: 44px; height: 44px; background: #fff; color: #0A0A0A; border: 0; border-radius: 50%; cursor: pointer; font: 300 26px/1 system-ui; display: flex; align-items: center; justify-content: center; } .lightbox__close:hover { background: var(--c-deep); } /* ─── Skip link ─────────────────────────────────────────────────────── */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { position: absolute; left: 8px; top: 8px; background: var(--c-cream); color: var(--c-offblack); padding: 8px 12px; z-index: 1000; font: 500 12px var(--font-sans); border-radius: 8px; } /* ─── Identity gate (OTP first, before the storefront) ───────────────── * The storefront body starts with `.nu-locked` (set server-side). The * gate is the only thing visible until JS verifies the student and * removes the lock class. Browsers without JS will see only the gate — * which is correct: no items, no prices, no PII leakage. */ body.nu-locked > #main { visibility: hidden; pointer-events: none; } body.nu-locked { overflow: hidden; } .nu-gate { position: fixed; inset: 0; z-index: 9000; background: var(--c-offblack); display: flex; align-items: center; justify-content: center; padding: 24px 16px env(safe-area-inset-bottom, 24px); overflow-y: auto; } body:not(.nu-locked) .nu-gate { display: none; } .nu-gate__card { width: 100%; max-width: 420px; background: var(--c-charcoal); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 28px 24px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: 16px; } .nu-gate__logo { height: 28px; width: auto; max-width: 80%; display: block; margin: 0 auto; opacity: 0.9; } body.theme-dark .nu-gate__logo { filter: invert(1) hue-rotate(180deg); } .nu-gate__lead { text-align: center; } .nu-gate__title { font: 600 22px/1.2 var(--font-sans); margin: 0 0 6px; color: var(--c-cream); letter-spacing: -0.01em; } .nu-gate__sub { font: 400 13px/1.45 var(--font-sans); color: var(--c-muted); margin: 0; } .nu-gate__foot { font: 400 11px/1.4 var(--font-sans); color: var(--c-muted-soft); text-align: center; margin: 8px 0 0; } /* ─── Student banner (shown above the storefront after gate clears) ──── */ .nu-student-banner { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 6px; padding: 10px 16px; background: rgba(242, 107, 58, 0.12); color: var(--c-cream); font: 500 13px/1.2 var(--font-sans); border-bottom: 1px solid rgba(242, 107, 58, 0.30); } .nu-student-banner__hi { color: var(--c-muted); } .nu-student-banner__dot { color: var(--c-muted-soft); margin: 0 4px; } .nu-student-banner__signout { margin-inline-start: auto; background: transparent; border: 0; width: 24px; height: 24px; border-radius: 50%; font: 300 18px/1 var(--font-sans); color: var(--c-muted); cursor: pointer; } .nu-student-banner__signout:hover { color: var(--c-orange); } /* ─── Hero greeting (replaces the degree toggle once verified) ───────── * After the OTP gate clears, the degree is known + locked to the * student's record, so the Bachelor/Master toggle has no decision to * make. We swap it for a single-line greeting in the same spot: * "Hi — Your degree: " + sign-out ×. */ .hero-greeting { display: none; } .hero-greeting[hidden] { display: none; } .hero-card__degree.is-greeting [data-degree-tag], .hero-card__degree.is-greeting [data-degree-toggle] { display: none; } .hero-card__degree.is-greeting .hero-greeting { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 16px; background: var(--c-deep); border: 1px solid var(--hairline); border-radius: var(--r-pill); font: 500 14px/1.2 var(--font-sans); color: var(--c-cream); } .hero-greeting__hi { color: var(--c-muted); font-weight: 400; } .hero-greeting__name { font-weight: 700; color: var(--c-cream); } .hero-greeting__sep { color: var(--c-muted-soft); margin: 0 2px; } .hero-greeting__label { color: var(--c-muted); font-weight: 400; } .hero-greeting__degree { background: rgba(242, 107, 58, 0.16); color: var(--c-orange-deep); border-radius: 999px; padding: 5px 12px; font: 700 12px/1 var(--font-sans); letter-spacing: 0.02em; white-space: nowrap; } body.theme-dark .hero-greeting__degree { color: #FFB89A; } .hero-greeting__out { margin-inline-start: auto; width: 24px; height: 24px; border-radius: 50%; background: transparent; border: 1px solid var(--hairline); color: var(--c-muted); font: 300 18px/22px var(--font-sans); cursor: pointer; padding: 0; flex-shrink: 0; } .hero-greeting__out:hover { color: var(--c-orange); border-color: var(--c-orange); }