/* ============================================================================ twc-fonts.css Stefan 2026/06/24 - Global self-hosted brand fonts + tokens for TheWedCollective. Loaded once, globally, from main_layout.php so every admin page has: 1. Maison Galliard Script -> the decorative ACCENT font (brand new capability) 2. Karla 400/700/800 -> self-hosted copies of the display+body font 3. The brand :root tokens -> single canonical source for the planned reskin Font files live at: asset/fonts/twc/ (URLs below are relative to THIS file, which sits at asset/css/, hence ../fonts/twc/). --- Brand usage rules (from Rachael Lyons' Brand Presentation Rev 1, p4/p13/p14) --- - Karla carries ALL headings and body. "Two fonts overall, variety by weight." - Maison Galliard Script is ACCENT ONLY: the brand name set large + low-contrast as a BACKGROUND WATERMARK ("white on beige... acts more like texture than typography"), plus small attention-to-detail flourishes near strong CTAs. - DO NOT use the script font for readable headings, body copy, buttons or data. ========================================================================== */ /* --------------------------------------------------------------------------- 1. Maison Galliard Script (decorative accent) --------------------------------------------------------------------------- */ @font-face { font-family: 'Maison Galliard Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/twc/maison-galliard-script.woff2') format('woff2'), url('../fonts/twc/maison-galliard-script.woff') format('woff'); } /* --------------------------------------------------------------------------- 2. Karla (self-hosted display + body) Same family name as the Google Fonts CDN copy, so existing `font-family: 'Karla'` declarations resolve to these files too. Acts as a resilient fallback now; lets us drop the CDN later (GDPR). --------------------------------------------------------------------------- */ @font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/twc/karla-regular.woff2') format('woff2'), url('../fonts/twc/karla-regular.woff') format('woff'); } @font-face { font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/twc/karla-bold.woff2') format('woff2'), url('../fonts/twc/karla-bold.woff') format('woff'); } @font-face { font-family: 'Karla'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/twc/karla-extrabold.woff2') format('woff2'), url('../fonts/twc/karla-extrabold.woff') format('woff'); } /* --------------------------------------------------------------------------- 3. Canonical brand tokens The per-page views still declare their own :root copy of these; keeping a global copy here means non-redesigned pages can start using them and the future global reskin has one source of truth. Values are identical to the per-page blocks, so there is no cascade conflict. --------------------------------------------------------------------------- */ :root { --twc-dark: #181514; --twc-beige: #DDCABC; --twc-cream: #F2EAE4; --twc-terracotta: #A47865; --twc-offwhite: #F8F4EE; --twc-body: #47342b; --twc-white: #FFFFFF; --twc-muted: #8a7969; --twc-border: #e8ddd2; --twc-shadow: 0 1px 3px rgba(24,21,20,0.04), 0 4px 12px rgba(24,21,20,0.04); /* Script font as a token so we can swap the stack in one place if needed. */ --twc-script: 'Maison Galliard Script', 'Brush Script MT', cursive; } /* --------------------------------------------------------------------------- 4. Script utility classes All prefixed twc- per the established convention. These are the ONLY sanctioned ways to use the script font. --------------------------------------------------------------------------- */ /* 4a. Inline accent word (e.g. turn one word of a heading into script). Sits next to Karla text; nudged optically so the baseline reads right. */ .twc-script { font-family: var(--twc-script); font-weight: 400; font-style: normal; line-height: 1; /* script faces sit small for their point size; bump a touch when inline */ font-size: 1.15em; letter-spacing: .01em; } /* 4b. Coloured flourish — terracotta accent, for "attention to detail" moments. */ .twc-script-accent { font-family: var(--twc-script); font-weight: 400; color: var(--twc-terracotta); line-height: 1; font-size: 1.25em; } /* 4c. Background brand-name WATERMARK — the signature move from the deck. Large, low-contrast, behind content, "more texture than typography". USAGE:
... hero content ...
The host must be position:relative + overflow:hidden. Absolute positioning (not fixed) is used on purpose so it is unaffected by the admin theme's transformed .content-wrapper (the fixed-inside-transform gotcha). */ .twc-watermark-host { position: relative; overflow: hidden; } .twc-name-watermark { position: absolute; right: -0.25em; bottom: -0.30em; margin: 0; font-family: var(--twc-script); font-weight: 400; font-size: clamp(72px, 16vw, 220px); line-height: 0.8; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; /* default: white-on-beige low-contrast, per Rachael's note. Use over the beige / terracotta / dark hero areas. */ color: rgba(255, 255, 255, 0.16); } /* For light surfaces (cream / off-white) where white would vanish, use a barely-there warm-dark instead. */ .twc-name-watermark--dark { color: rgba(24, 21, 20, 0.05); } /* Make sure real hero content always sits above the watermark. */ .twc-watermark-host > *:not(.twc-name-watermark) { position: relative; z-index: 1; } /* ========================================================================== Stefan 2026/08/20 - Supplier Profile ADD form brand styling. Placed here (the main brand sheet, loaded after custom.css) and scoped to the form's ID so it wins on specificity - no class, no JS, no !important battle. ========================================================================== */ #form_form_supplier_profiles_add .box-title { display:block; color:var(--twc-dark); font-weight:800; font-size:20px; font-family:'Karla',Arial,sans-serif; margin:30px 0 18px; padding-bottom:12px; border-bottom:1px solid #e8ddd2; } #form_form_supplier_profiles_add .control-label { color:var(--twc-dark); font-weight:700; font-family:'Karla',Arial,sans-serif; font-size:13.5px; } #form_form_supplier_profiles_add .required { color:var(--twc-terracotta); } #form_form_supplier_profiles_add .form-control { border:1px solid #e8ddd2; border-radius:10px; height:auto; min-height:44px; padding:10px 14px; font-family:'Karla',Arial,sans-serif; font-size:14px; color:var(--twc-body); box-shadow:none; background:#fff; } #form_form_supplier_profiles_add .form-control:focus { border-color:var(--twc-terracotta); box-shadow:none; } #form_form_supplier_profiles_add .help-block { color:var(--twc-muted); font-family:'Karla',Arial,sans-serif; font-size:12.5px; margin-top:6px; } #form_form_supplier_profiles_add .btn-primary, #form_form_supplier_profiles_add .btn.btn_save, #form_form_supplier_profiles_add .btn.btn_save_back { background:var(--twc-dark); border:none; color:var(--twc-offwhite); border-radius:999px; padding:11px 26px; font-family:'Karla',Arial,sans-serif; font-weight:700; font-size:14px; } #form_form_supplier_profiles_add .btn-primary:hover, #form_form_supplier_profiles_add .btn.btn_save:hover, #form_form_supplier_profiles_add .btn.btn_save_back:hover { background:var(--twc-terracotta); } #form_form_supplier_profiles_add .btn-default { border:1px solid #e8ddd2; border-radius:999px; font-family:'Karla',Arial,sans-serif; font-weight:700; color:var(--twc-muted); background:#fff; } #form_form_supplier_profiles_add .btn-default:hover { border-color:var(--twc-terracotta); color:var(--twc-terracotta); } #form_form_supplier_profiles_add .chosen-container-multi .chosen-choices { border:1px solid #e8ddd2; border-radius:10px; padding:6px 8px; box-shadow:none; } #form_form_supplier_profiles_add .chosen-container-multi .chosen-choices li.search-choice { background:var(--twc-offwhite); border:1px solid #e8ddd2; border-radius:6px; color:var(--twc-body); box-shadow:none; font-family:'Karla',Arial,sans-serif; } /* Header block (outside the form). Scoped to the box-warning wrapper on this page. */ .content .box.box-warning .widget-user-2 { border:none; box-shadow:none; } .content .box.box-warning .widget-user-2 > .widget-user-header { background:transparent; text-align:center; } .content .box.box-warning .widget-user-2 .widget-user-image { position:static; margin:0 auto 10px; float:none; } .content .box.box-warning .widget-user-2 .widget-user-image > .img-circle { width:78px; height:78px; } .content .box.box-warning .widget-user-username { color:var(--twc-dark); font-weight:800; font-family:'Karla',Arial,sans-serif; font-size:26px; } .content .box.box-warning .widget-user-desc { color:var(--twc-body); font-family:'Karla',Arial,sans-serif; font-size:14.5px; }