/* Okapi Gaming Lab — shared stylesheet Plain CSS, no build step, no framework. Safe to upload as-is to Hostinger. Brand palette + logo sizing are documented in detail in docs/brand-style-guide.md — this file is the implementation, that doc is the "why." Keep them in sync if either changes. */ :root { /* ---- Brand palette (do not rename — referenced in docs/brand-style-guide.md) ---- */ --okapi-pink: #efbbec; --okapi-dark: #242327; --okapi-gray: #59565d; --okapi-muted: #8e738e; --okapi-border: #59565d; --okapi-white: #f7f2f7; /* ---- Semantic aliases used throughout this file ---- */ --color-bg: var(--okapi-pink); --color-bg-soft: #faeefa; /* lighter pink wash — used by .theme-serious pages */ --color-surface: var(--okapi-white); --color-surface-alt: #fbeffa; /* faint pink-white, alternating section background */ --color-text: var(--okapi-dark); --color-text-muted: var(--okapi-gray); --color-text-soft: var(--okapi-muted); --color-text-on-dark: var(--okapi-white); --color-action: var(--okapi-dark); /* primary button/link-affordance color — kept dark for contrast, pink is a canvas color here, not a text color */ --color-action-contrast: var(--okapi-white); --color-accent: var(--okapi-muted); /* hover states, focus rings, small decorative accents */ --color-border: var(--okapi-border); --color-danger: #b3422e; /* functional only — not part of the brand palette */ --color-success: #3a7d4f; /* functional only — not part of the brand palette */ --radius: 14px; /* friendly rounded corners for playful pages */ --radius-serious: 6px; --max-width: 1100px; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---- Logo sizing — see docs/brand-style-guide.md "Logo usage" for full guidance ---- Wide (icon+words) source file: 1139x360 (~3.16:1). Height-driven sizing only; never set width directly or the lockup will distort. */ --logo-wide-height: 56px; --logo-wide-height-mobile: 40px; /* Icon-only source file: 540x360 (~1.5:1, not square — see brand guide before using as a real favicon). */ --logo-icon-size: 32px; --logo-icon-size-lg: 96px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.55; } /* Serious tone for partner/school/legal pages: same palette, calmer execution. Add class="theme-serious" to — see docs/brand-style-guide.md. */ body.theme-serious { background: var(--color-bg-soft); } img { max-width: 100%; display: block; } a { color: var(--color-action); text-decoration: underline; } a:hover { color: var(--color-accent); } h1, h2, h3, h4 { line-height: 1.2; margin-top: 0; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; } /* ---------- Header / Nav ---------- */ .site-header { background: var(--color-surface); color: var(--color-text); border-bottom: 3px dashed var(--color-border); } body.theme-serious .site-header { border-bottom-style: solid; } .nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.25rem; max-width: var(--max-width); margin: 0 auto; } .nav-brand { display: inline-flex; align-items: center; } /* Wide logo lockup in the header — see --logo-wide-height above. */ .logo-wide { height: var(--logo-wide-height); width: auto; } .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--color-text); text-decoration: none; font-size: 0.95rem; font-weight: 600; padding: 0.25rem 0.1rem; border-bottom: 2px solid transparent; } .nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--okapi-muted); } /* Simple static CSS dropdown — no JS. Services and Refurbished Inventory each carry child links. Shows on hover (mouse) or focus-within (keyboard/AT), so children stay reachable without a script. */ .nav-dropdown { position: relative; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; margin: 0.35rem 0 0; padding: 0.4rem; min-width: 190px; list-style: none; background: var(--color-surface); border: 2px dashed var(--color-border); border-radius: var(--radius-serious); box-shadow: 0 4px 10px rgba(36, 35, 39, 0.12); z-index: 20; } body.theme-serious .nav-dropdown-menu { border-style: solid; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; } .nav-dropdown-menu li { margin: 0; } .nav-dropdown-menu a { display: block; padding: 0.4rem 0.5rem; white-space: nowrap; border-bottom: none; } .nav-cta { background: var(--okapi-pink); color: var(--color-text); border: 2px dashed var(--color-text); border-radius: 999px; padding: 0.45rem 1rem; font-weight: 700; } .nav-cta:hover { background: var(--color-text); color: var(--color-action-contrast); border-style: solid; } body.theme-serious .nav-cta { border-radius: var(--radius-serious); border-style: solid; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(160deg, var(--okapi-pink) 0%, var(--color-surface) 100%); color: var(--color-text); padding: 3.5rem 1.25rem; text-align: center; border-bottom: 3px dashed var(--color-border); } body.theme-serious .hero { background: var(--okapi-dark); color: var(--color-text-on-dark); border-bottom-style: solid; } body.theme-serious .hero p { color: #d9d3d8; } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.6rem; } .hero p { font-size: 1.1rem; /* Not --color-text-muted: muted gray on the pink/light hero background fails AA contrast at this size — see docs/brand-style-guide.md. */ color: var(--color-text); max-width: 640px; margin: 0 auto 1.5rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 0.7rem 1.4rem; border-radius: var(--radius); font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 1rem; } body.theme-serious .btn { border-radius: var(--radius-serious); } .btn-primary { background: var(--color-action); color: var(--color-action-contrast); } .btn-primary:hover { background: var(--okapi-gray); color: var(--color-action-contrast); } .btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-text); } .btn-secondary:hover { border-color: var(--okapi-muted); color: var(--okapi-muted); } /* Use on dark backgrounds (e.g. body.theme-serious .hero) */ .btn-on-dark { background: var(--okapi-pink); color: var(--okapi-dark); border-color: var(--okapi-pink); } .btn-on-dark:hover { background: var(--color-text-on-dark); border-color: var(--color-text-on-dark); } .btn-light { background: var(--color-surface); color: var(--color-text); border-color: var(--color-surface); } .btn-light:hover { background: var(--color-surface-alt); } /* ---------- Sections / Cards ---------- */ .section { padding: 3rem 1.25rem; } .section-alt { background: var(--color-surface-alt); } body.theme-serious .section-alt { background: var(--color-surface); } .section-header { text-align: center; max-width: 700px; margin: 0 auto 2rem; } .section-header p { /* Same contrast reasoning as .hero p above — these sit on pink/light section backgrounds, not white. */ color: var(--color-text); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; max-width: var(--max-width); margin: 0 auto; } .card { background: var(--color-surface); border: 2px dashed var(--color-border); border-radius: var(--radius); padding: 1.4rem; } body.theme-serious .card { border-style: solid; border-radius: var(--radius-serious); } .card h3 { margin-bottom: 0.4rem; } .card .price { font-weight: 700; color: var(--color-text); } .badge { display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); } .badge-grade-a { background: #e6f4ea; color: var(--color-success); border-color: #bfe3c9; } .badge-grade-b { background: #fdf2e1; color: #9a6a16; border-color: #f1d8ab; } .badge-grade-c { background: #f8e8e4; color: var(--color-danger); border-color: #eec6bc; } /* "Sticker" callout — playful pages only (e.g. "Free Local Pickup!"). Color is set explicitly (not inherited) because this sits on a pink background even inside a dark theme-serious hero — without this it inherited the hero's light text color, leaving low-contrast white-on-pink. */ .sticker { display: inline-block; background: var(--okapi-pink); color: var(--okapi-dark); border: 2px dashed var(--okapi-dark); border-radius: 999px; padding: 0.3rem 0.9rem; font-weight: 700; font-size: 0.85rem; transform: rotate(-2deg); } body.theme-serious .sticker { transform: none; border-style: solid; border-radius: var(--radius-serious); } /* ---------- Notices / disclaimers ---------- */ .notice { background: var(--color-surface-alt); border-left: 4px solid var(--okapi-muted); padding: 0.9rem 1.1rem; border-radius: 0 var(--radius-serious) var(--radius-serious) 0; margin: 1.25rem 0; font-size: 0.95rem; } .notice-warning { border-left-color: var(--okapi-dark); } .notice strong { color: var(--color-text); } /* ---------- Steps list ---------- */ .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: var(--max-width); margin-inline: auto; } .steps li { counter-increment: step; position: relative; padding: 0.5rem 0 1.1rem 2.6rem; border-left: 2px dashed var(--color-border); margin-left: 0.9rem; } body.theme-serious .steps li { border-left-style: solid; } .steps li:last-child { border-left-color: transparent; } .steps li::before { content: counter(step); position: absolute; left: -1.1rem; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--color-text); color: var(--color-action-contrast); font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } .steps h3 { margin-bottom: 0.25rem; } /* ---------- Forms ---------- */ form { max-width: 640px; margin: 0 auto; } .form-row { margin-bottom: 1.1rem; } .form-row label { display: block; font-weight: 600; margin-bottom: 0.3rem; } .hint { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.25rem; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-serious); font-size: 1rem; font-family: inherit; background: var(--color-surface); color: var(--color-text); } textarea { min-height: 110px; resize: vertical; } fieldset { border: 1px dashed var(--color-border); border-radius: var(--radius-serious); padding: 0.9rem 1rem; margin: 0 0 1.1rem; } body.theme-serious fieldset { border-style: solid; } fieldset legend { font-weight: 600; padding: 0 0.3rem; } .checkbox-row { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 400; margin-bottom: 0.5rem; } .checkbox-row input { margin-top: 0.25rem; } /* Honeypot field — hidden from real visitors, left in the tab/DOM flow for bots */ .hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ---------- Pricing calculator ---------- */ #pricing-calculator { max-width: 720px; margin: 0 auto; background: var(--color-surface-alt); border: 2px dashed var(--color-border); border-radius: var(--radius); padding: 1.5rem; } body.theme-serious #pricing-calculator { border-style: solid; border-radius: var(--radius-serious); } .calc-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: end; } .calc-add-btn { margin-top: 1rem; } #estimate-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; background: var(--color-surface); } #estimate-table th, #estimate-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; } #estimate-table tfoot td { font-weight: 700; border-bottom: none; } .remove-line { background: none; border: none; color: var(--color-danger); cursor: pointer; font-weight: 700; font-size: 0.95rem; text-decoration: underline; padding: 0; } /* Generic content table — pricing overviews, discount/exclusion tables, policy pages */ .data-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; } .data-table th, .data-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; } .data-table th { border-bottom: 2px solid var(--color-text); font-weight: 700; } /* ---------- Long-form legal/policy documents ---------- */ .legal-doc { max-width: 760px; margin: 0 auto; } .legal-doc h2 { margin-top: 2rem; padding-top: 0.5rem; border-top: 2px dashed var(--color-border); } body.theme-serious .legal-doc h2 { border-top-style: solid; } .legal-doc h2:first-of-type { border-top: none; margin-top: 0; } .legal-meta { /* Not --color-text-muted: legal pages sit on the pink/light background, same contrast issue as .hero p / .section-header p above. */ color: var(--color-text); font-size: 0.9rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--okapi-dark); color: #cfc7ce; padding: 2.5rem 1.25rem 1.5rem; margin-top: 3rem; font-size: 0.9rem; } /* Keeps the icon logo legible regardless of footer background. */ .footer-logo-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--color-text-on-dark); border-radius: 999px; padding: 0.4rem; margin-bottom: 0.6rem; } .logo-icon { height: var(--logo-icon-size); width: auto; display: block; } .logo-icon-lg { height: var(--logo-icon-size-lg); width: auto; display: block; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.5rem; max-width: var(--max-width); margin: 0 auto 1.5rem; } .footer-grid h4 { color: var(--color-text-on-dark); font-size: 0.95rem; margin-bottom: 0.6rem; } .footer-grid a { color: #cfc7ce; display: block; margin-bottom: 0.35rem; text-decoration: none; } .footer-grid a:hover { color: var(--okapi-pink); } .footer-bottom { max-width: var(--max-width); margin: 0 auto; border-top: 1px solid #3a3840; padding-top: 1rem; font-size: 0.8rem; color: #9a939a; } /* ---------- Accessible, on-brand focus state ---------- */ /* Replaces the browser default blue ring everywhere, including inside the dark footer/header — :focus-visible only shows for keyboard/AT users. */ :focus-visible { outline: 3px solid var(--okapi-muted); outline-offset: 2px; border-radius: 2px; } /* ---------- Utility ---------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .dashed-border { border: 2px dashed var(--color-border); } @media (max-width: 600px) { .hero { padding: 2.5rem 1rem; } .section { padding: 2rem 1rem; } .logo-wide { height: var(--logo-wide-height-mobile); } }