/* BADRIB — shared application styles */ :root { --color-primary: #3f6f77; --color-primary-dark: #3f6f77; --color-primary-soft: #dcebed; --color-secondary: #d5e5d7; --color-accent: #b9d6c3; --color-alert: #b35656; --color-bg: #fffaf4; --color-bg-soft: #f4eee6; --color-bg-gold: #D6C074; --color-text: #26343b; --color-text-muted: #607077; --color-border: #ded8d0; --color-success: #6d9873; --color-success-light: #edf5e9; --color-alert-light: #fff0ec; --font-display: 'Fredoka', sans-serif; --font-body: 'DM Sans', sans-serif; --shadow-soft: 0 18px 55px rgba(48, 69, 76, 0.10); } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--color-text); background: #D6C074; } main { min-height: 70vh; } button, a { transition: transform .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } :focus-visible { outline: 3px solid rgba(95, 143, 150, .42); outline-offset: 3px; } @font-face { font-family: 'Material Symbols Rounded'; font-style: normal; font-weight: 300 600; font-display: block; src: url('/fonts/material-symbols-rounded.woff2') format('woff2'); } .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .icon-sm { font-size: 18px; } .font-display { font-family: var(--font-display); } .bg-warm { background: var(--color-bg); } .text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, .1); } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, .15); } .animate-slide-down { animation: slide-down .3s ease both; } @keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Landing page — Pastel Space Storybook */ .landing-page { --ink: #26343b; --muted: #65757b; --cream: #fffaf4; --peach: #f4c7a9; --butter: #b9d6c3; --mint: #c9dfcf; --sky: #bcd9e7; --lavender: #d6c9e8; --coral: #b35656; margin: 0; background: #D6C074; color: var(--ink); font-family: var(--font-body); } .landing-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .section-shell { padding: 112px 0; } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid transparent; transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease; } .site-header.is-scrolled { border-color: rgba(95, 143, 150, .16); box-shadow: 0 10px 35px rgba(38, 52, 59, .06); } .header-inner { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 34px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-primary-dark); text-decoration: none; font: 700 1.45rem var(--font-display); letter-spacing: .04em; } .brand-mark { display: block; width: 40px; height: 40px; border-radius: 14px; background: var(--cream); box-shadow: 0 7px 16px rgba(63, 111, 119, .2); object-fit: cover; object-position: center 32%; } .desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; } .desktop-nav a, .text-link { color: #45565d; font-weight: 600; text-decoration: none; font-size: .94rem; } .desktop-nav a:hover, .text-link:hover { color: var(--color-primary-dark); transform: translateY(-1px); } .header-actions { display: flex; align-items: center; gap: 20px; } .button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 25px; border: 1px solid transparent; border-radius: 18px; font-weight: 700; text-decoration: none; } .button .material-symbols-rounded { font-size: 20px; } .button:hover { transform: translateY(-2px); } .button:active { transform: translateY(0) scale(.98); } .button-primary { color: #fff; background: var(--color-primary-dark); box-shadow: 0 10px 24px rgba(63, 111, 119, .22); } .button-primary:hover { background: #345f67; box-shadow: 0 14px 30px rgba(63, 111, 119, .28); } .button-secondary { color: var(--ink); background: #fff; border-color: #dcd6ce; } .button-secondary:hover { border-color: var(--color-primary); box-shadow: 0 9px 22px rgba(48, 69, 76, .08); } /* Filled variant for section links that should read as buttons, not text links. */ .button-filled { color: #fff; background: var(--color-primary-dark); box-shadow: 0 9px 22px rgba(63, 111, 119, .22); } .button-filled:hover { background: #345f67; box-shadow: 0 13px 28px rgba(63, 111, 119, .28); } .button-quiet { min-height: 48px; padding-inline: 18px; color: var(--color-primary-dark); background: transparent; } .button-quiet:hover { background: var(--color-primary-soft); } .button-small { min-height: 44px; padding: 0 19px; border-radius: 14px; font-size: .9rem; } .button-cream { color: #324d55; background: var(--cream); } .button-cream:hover { color: #263f46; background: #fff; box-shadow: 0 14px 32px rgba(17, 47, 54, .22); } .hero { position: relative; min-height: 700px; display: flex; align-items: center; overflow: hidden; padding-top: 82px; padding-bottom: 96px; background: var(--mint); } .hero::before { content: ''; position: absolute; width: 500px; height: 500px; right: -250px; top: -160px; border: 1px solid rgba(95,143,150,.16); border-radius: 50%; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 72px; } .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: #426b73; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .eyebrow > span { width: 24px; height: 2px; background: currentColor; } .hero h1 { max-width: 650px; margin: 0; font: 600 clamp(3.4rem, 6.1vw, 6.4rem)/.94 var(--font-display); letter-spacing: -.055em; } .hero h1 em { color: var(--color-primary-dark); font-style: normal; position: relative; } .hero-slogan { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin-inline: auto; font-size: clamp(2.15rem, 3.9vw, 3.9rem); line-height: 1.02; letter-spacing: -.04em; } .hero-slogan .acronym-line { display: block; text-align: left; color: var(--muted); } .hero-slogan b { display: inline-block; flex: 0 0 auto; width: .66em; margin-right: .06em; color: var(--color-primary-dark); font-weight: 700; text-align: center; } .hero h1 em::after { content: ''; position: absolute; left: 3%; right: 0; bottom: -9px; height: 12px; border: solid #e4a98e; border-width: 0 0 3px; border-radius: 50%; transform: rotate(-1.5deg); } .hero-lead { max-width: 570px; margin: 34px 0 0; color: var(--muted); font-size: 1.18rem; line-height: 1.75; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .parent-note { display: flex; align-items: center; gap: 9px; margin-top: 24px; color: #718086; font-size: .85rem; } .parent-note .material-symbols-rounded { color: #71967a; font-size: 19px; } .hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .8; } .hero-orb-one { width: 120px; height: 120px; left: -46px; top: 25%; background: var(--butter); } .hero-orb-two { width: 52px; height: 52px; right: 49%; top: 12%; background: #D6C074; } .mission-visual { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 470px; } .mascot-stage { position: relative; display: grid; place-items: center; min-height: 430px; padding: 8px 0 0; } .mascot { position: relative; z-index: 2; width: min(100%, 470px); height: auto; filter: drop-shadow(0 26px 34px rgba(45, 64, 70, .22)); } .mascot-blob { position: absolute; border-radius: 50%; z-index: 1; } .mascot-blob-one { width: 330px; height: 330px; top: 34px; left: 50%; margin-left: -165px; background: var(--butter); } .mascot-blob-two { width: 200px; height: 200px; top: 214px; left: 50%; margin-left: -190px; background: #D6C074; opacity: .55; } .mascot-tag { position: absolute; z-index: 4; top: 4px; right: 12%; min-height: 44px; display: grid; place-items: center; padding: 0 24px; border-radius: 22px; background: var(--muted); box-shadow: 0 10px 24px rgba(45, 64, 70, .22); color: #f5f8f7; font-size: .95rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .spark { position: absolute; color: #D6C074; font-size: 27px; } .spark-one { left: 35px; top: 60px; } .spark-two { right: 22px; top: 42px; font-size: 20px; } .spark-three { left: 25px; bottom: 83px; font-size: 18px; } /* Legal pages. Long-form reading, so the measure is capped and the type is larger than the app chrome. Same palette, nothing new introduced. */ .legal-shell { width: min(100% - 32px, 820px); } .legal-header { margin-bottom: 42px; } .legal-header h1 { margin: 0; font: 600 clamp(2.4rem, 5vw, 3.6rem)/1.05 var(--font-display); letter-spacing: -.04em; color: var(--color-primary-dark); } .legal-updated { margin: 16px 0 0; color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .legal-body { color: #3f4f55; font-size: 1.02rem; line-height: 1.78; } .legal-body h2 { margin: 52px 0 16px; font: 600 1.5rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); } .legal-body h2:first-child { margin-top: 0; } .legal-body h3 { margin: 36px 0 12px; font: 600 1.18rem/1.3 var(--font-display); color: var(--ink); } .legal-body h4 { margin: 26px 0 10px; font: 700 1rem/1.35 var(--font-display); color: var(--ink); } .legal-body p { margin: 0 0 17px; } .legal-body ul { margin: 0 0 20px; padding-left: 24px; } .legal-body li { margin-bottom: 10px; } .legal-body a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; } .legal-body a:hover { color: #294f57; } .legal-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--color-border); } .legal-switch a { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; } .legal-switch a:hover { text-decoration: underline; } .legal-switch span { color: #b6a99a; } .legal-page .site-footer { margin-top: 0; } .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 46px; } .section-heading .eyebrow { margin-bottom: 15px; } .section-heading h2 { max-width: 680px; margin: 0; font: 600 clamp(2.3rem, 4vw, 4rem)/1.06 var(--font-display); letter-spacing: -.04em; } .adventure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .adventure-card { overflow: hidden; border: 1px solid rgba(73,91,97,.1); border-radius: 28px; background: #fff; box-shadow: 0 12px 30px rgba(45,64,70,.06); transition: transform .3s ease, box-shadow .3s ease; } .adventure-card:hover { transform: translateY(-8px); box-shadow: 0 25px 48px rgba(45,64,70,.13); } .card-art { position: relative; display: grid; place-items: center; height: 214px; overflow: hidden; } /* A real cover fills the panel edge to edge, matching the library tiles below. object-fit:cover means a portrait or wide thumbnail crops rather than distorts. */ .adventure-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .adventure-card:hover .adventure-card__photo { transform: scale(1.05); } .stories-card .card-art { background: var(--butter); } .activities-card .card-art { background: #f2d3bc; } .games-card .card-art { background: var(--lavender); } .book-shape { position: relative; display: flex; width: 150px; height: 105px; border-radius: 13px 17px 17px 13px; background: #fff7df; box-shadow: 9px 10px 0 #d9bd7e, 0 19px 30px rgba(111,87,43,.16); transform: rotate(-5deg); transition: transform .35s ease; } .book-shape::after { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: #e3d2a9; } .book-shape span { flex: 1; margin: 25px 10px 0; border-bottom: 3px solid #e4c97e; } .book-shape i { position: absolute; right: 17px; top: 20px; color: #bf8069; font-size: 43px; } .art-star { position: absolute; color: #b48d46; font-size: 25px; } .palette { position: relative; width: 168px; height: 105px; border-radius: 55% 48% 48% 55%; background: #fff9e8; box-shadow: 0 15px 27px rgba(122,84,57,.15); transform: rotate(-5deg); } .palette::after { content: ''; position: absolute; right: 22px; bottom: 19px; width: 30px; height: 30px; border-radius: 50%; background: #e9b897; } .palette span { position: absolute; width: 27px; height: 27px; border-radius: 50%; } .palette span:nth-child(1) { top: 18px; left: 30px; background: #e99e9b; }.palette span:nth-child(2) { top: 15px; right: 43px; background: #f1cf67; }.palette span:nth-child(3) { left: 48px; bottom: 17px; background: #8eb8ac; }.palette span:nth-child(4) { right: 60px; bottom: 16px; background: #8f8fc0; } .art-pencil { position: absolute; right: 38px; top: 25px; color: #a96855; font-size: 48px; transform: rotate(25deg); } .art-coin { position: absolute; right: 38px; top: 25px; color: #a96855; font-size: 48px; transform: rotate(25deg); } .gamepad { position: relative; display: grid; place-items: center; width: 160px; height: 105px; border-radius: 46px; background: #f9f4e8; box-shadow: 0 15px 27px rgba(83,72,106,.15); transform: rotate(3deg); } .gamepad::before { content: ''; position: absolute; left: 30px; top: 34px; width: 20px; height: 20px; border-radius: 50%; background: #766c94; box-shadow: 22px 0 0 #766c94; } .gamepad span { position: absolute; right: 32px; top: 38px; width: 12px; height: 34px; border-radius: 6px; background: #887fa4; } .gamepad span::before { content: ''; position: absolute; left: -11px; top: 11px; width: 34px; height: 12px; border-radius: 6px; background: #887fa4; } .gamepad i { position: absolute; left: 52px; top: 62px; width: 56px; height: 7px; border-radius: 4px; background: #d8cfe6; } .gamepad b { position: absolute; left: 70px; top: 78px; width: 20px; height: 7px; border-radius: 4px; background: #d8cfe6; } .adventure-card:hover .book-shape { transform: rotate(-2deg) scale(1.05); } .adventure-card:hover .palette { transform: rotate(-1deg) scale(1.05); } .adventure-card:hover .gamepad { transform: rotate(0) scale(1.05); } .card-content { padding: 26px 24px 25px; } .card-type-bar { background: var(--color-primary-dark); color: #fff; text-align: center; font-weight: 800; font-size: 1.1rem; padding: 12px 16px; letter-spacing: .02em; } .card-content h3 { margin: 0; font: 600 1.42rem/1.18 var(--font-display); letter-spacing: -.02em; } .card-content > p:not(.card-kicker) { min-height: 72px; margin: 14px 0 18px; color: var(--muted); font-size: .86rem; line-height: 1.55; } .coming-soon { display: inline-flex; align-items: center; gap: 7px; color: #7b8589; font-size: .84rem; font-weight: 800; } .coming-soon .material-symbols-rounded { font-size: 19px; } /* The panel's call to action is a real theme button, not a text link. It uses the site's own .button system rather than a panel-local style, so it matches the hero's buttons; :not(.button) keeps any future plain text link working. */ .card-content a:not(.button) { display: inline-flex; align-items: center; gap: 7px; color: #456f76; font-size: .84rem; font-weight: 800; text-decoration: none; } .card-content a:not(.button) .material-symbols-rounded { font-size: 19px; } .card-content a:not(.button):hover { gap: 11px; color: #294f57; } .card-content .button { align-self: flex-start; font-size: .95rem; } .coming-soon { color: #7b8589; cursor: default; } /* Keep the arrow travelling with the label on hover, as the text link did. */ .card-content .button .material-symbols-rounded { transition: transform .25s ease; } .card-content .button:hover .material-symbols-rounded { transform: translateX(4px); } .content-showcase, .story-library { background: #D6C074; } .content-showcase { padding-bottom: 55px; } .story-library { padding-top: 75px; } /* The stories and activities libraries are two bands of the SAME colour, so the rhythm between them is carried by spacing alone. Each one is a .section-shell contributing 112px, which stacked to 187px of dead air and read as two unrelated blocks. Trim both edges: the stories band keeps its generous top (it follows the tall adventure panels) but gives some back at the bottom, and the activities band opens tight, so the pair reads as one library in two rows. Both are single-class selectors, so the mobile overrides further down still win on source order at equal specificity. */ .story-library--stories { padding-bottom: 72px; } .story-library--activities { padding-top: 48px; } .story-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .story-tile { position: relative; display: block; overflow: hidden; border: 1px solid rgba(73,91,97,.1); border-radius: 24px; color: var(--ink); background: #fff; text-decoration: none; box-shadow: 0 10px 25px rgba(45,64,70,.06); transition: transform .3s ease, box-shadow .3s ease; } .story-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(45,64,70,.13); } .story-tile-art { display: grid; place-items: center; height: 155px; overflow: hidden; background: linear-gradient(145deg, var(--sky), #c9e2e4); color: #456f76; } .story-tile:nth-child(4n + 2) .story-tile-art { background: linear-gradient(145deg, var(--butter), #d6e8d7); } .story-tile:nth-child(4n + 3) .story-tile-art { background: linear-gradient(145deg, var(--mint), #d8ead8); } .story-tile:nth-child(4n) .story-tile-art { background: linear-gradient(145deg, #ecc9b7, #f3ddcf); } .story-tile-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .story-tile:hover .story-tile-art img { transform: scale(1.05); } .story-tile-art .material-symbols-rounded { font-size: 48px; } .story-tile-copy { padding: 19px 20px 22px; } .story-tile-copy > span { color: var(--color-primary-dark); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .story-tile-copy h3 { margin: 7px 0; font: 600 1.15rem/1.2 var(--font-display); } .story-tile-copy p { min-height: 43px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; } .story-arrow { position: absolute; right: 17px; bottom: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: #fff; background: var(--color-primary-dark); font-size: 18px; opacity: 0; transform: translateX(-6px); } .story-tile:hover .story-arrow { opacity: 1; transform: translateX(0); } .parent-cta { padding-top: 74px; } .parent-cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 60px; overflow: hidden; padding: 65px 70px; border-radius: 36px; color: #fff; background: #426b73; } .parent-cta-inner::before, .parent-cta-inner::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; pointer-events: none; } .parent-cta-inner::before { width: 270px; height: 270px; right: -100px; top: -145px; } .parent-cta-inner::after { width: 140px; height: 140px; left: 45%; bottom: -100px; } .eyebrow-light { color: #d8ecee; } .cta-copy { max-width: 700px; } .cta-copy h2 { margin: 0; font: 600 clamp(2.25rem, 4vw, 3.8rem)/1.05 var(--font-display); letter-spacing: -.04em; } .cta-copy > p:last-child { max-width: 640px; margin: 20px 0 0; color: #d9e6e6; font-size: 1rem; line-height: 1.65; } .parent-cta .button { position: relative; z-index: 2; flex: 0 0 auto; } .site-footer { padding: 48px 0; border-top: 1px solid var(--color-border); background: #f5efe7; } .footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; } .brand-footer { font-size: 1.2rem; } .brand-footer .brand-mark { width: 34px; height: 34px; font-size: 20px; } .footer-inner > div:first-child > p, .copyright { color: #718086; font-size: .78rem; } .footer-inner > div:first-child > p { margin: 7px 0 0; } .footer-links { display: flex; gap: 23px; } .footer-links a { color: #5f6f74; font-size: .8rem; font-weight: 600; text-decoration: none; } .footer-links a:hover { color: var(--color-primary-dark); transform: translateY(-1px); } .copyright { justify-self: end; margin: 0; } .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 1050px) { .desktop-nav { display: none; } .hero-grid { gap: 25px; } .adventure-grid { grid-template-columns: repeat(2, 1fr); } .card-art { height: 240px; } .story-list { grid-template-columns: repeat(2, 1fr); } .parent-cta-inner { padding: 55px 48px; } } @media (max-width: 760px) { .landing-container { width: min(100% - 32px, 620px); } .section-shell { padding: 78px 0; } .header-inner { height: 68px; } .brand { font-size: 1.22rem; } .brand-mark { width: 36px; height: 36px; border-radius: 12px; font-size: 21px; } .hero { padding-top: 65px; padding-bottom: 80px; } .hero-grid { grid-template-columns: 1fr; gap: 25px; } .hero h1 { font-size: clamp(3.25rem, 14vw, 5rem); } .hero-slogan { font-size: clamp(1.9rem, 8.6vw, 3rem); } .hero-lead { font-size: 1.04rem; } .hero-actions { flex-direction: column; align-items: stretch; } .mission-visual { min-height: 0; } .mascot-stage { min-height: 0; } .mascot { width: min(100%, 360px); } .section-heading { align-items: start; flex-direction: column; margin-bottom: 32px; } .adventure-grid, .story-list { grid-template-columns: 1fr; } .card-art { height: 225px; } .card-content > p:not(.card-kicker) { min-height: 0; } .story-library { padding-top: 15px; } .parent-cta { padding-top: 45px; } .parent-cta-inner { align-items: stretch; flex-direction: column; gap: 30px; padding: 43px 27px; border-radius: 28px; } .footer-inner { grid-template-columns: 1fr; text-align: center; } .footer-inner > div:first-child, .footer-links { justify-self: center; } .footer-links { flex-wrap: wrap; justify-content: center; } .copyright { justify-self: center; } } @media (max-width: 430px) { .header-actions .button { padding-inline: 15px; } .hero { min-height: auto; } .mission-visual { left: 50%; width: 420px; margin-left: -210px; } .story-arrow { display: none; } } /* Authenticated application shell */ .app-nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(63,111,119,.14); box-shadow: 0 8px 28px rgba(38,52,59,.06); } .app-nav__inner { width: min(1180px, calc(100% - 48px)); height: 76px; margin: 0 auto; display: flex; align-items: center; gap: 30px; } .app-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-primary-dark); font: 700 1.45rem var(--font-display); letter-spacing: .04em; text-decoration: none; } .app-brand__mark { width: 40px; height: 40px; display: block; background: var(--cream); border-radius: 14px; object-fit: cover; object-position: center 32%; box-shadow: 0 7px 16px rgba(63,111,119,.18); } .app-nav__links { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; } .app-nav__links:empty { display: none; } .app-nav--parent .app-nav__inner { gap: 8px; } .app-nav--parent .app-nav__links { flex: 1; justify-content: flex-end; } .app-nav__links > a { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; color: #53656c; border-radius: 13px; font-size: .88rem; font-weight: 600; text-decoration: none; } .app-nav--catalog .app-nav__links { gap: 30px; margin-left: auto; } .app-nav--catalog .app-nav__links > a { min-height: 0; padding: 0; border-radius: 0; background: transparent; font-size: .94rem; font-weight: 600; transform: none; } .app-nav--catalog .app-nav__links > a:hover { background: transparent; transform: translateY(-1px); } .app-nav__cart-count { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; color: #fff; background: var(--color-alert); border-radius: 10px; font-size: .67rem; } /* Cart feedback. The only signal that an item was added used to be the nav counter, which a parent can easily miss. These rules make the button itself say so, and give the counter a short pulse so the eye is drawn there too. */ .cart-btn--added { color: #45565d !important; background: #e3ece9 !important; box-shadow: none !important; cursor: default; pointer-events: none; } .cart-btn--added:hover { transform: none !important; } .cart-btn--added .cart-btn__label { position: relative; } /* The tick scales in once, then rests. A looping animation on a state that persists would be noise; this fires on the state change and stops. */ .cart-btn__tick { display: inline-block; font-size: 1.15em; vertical-align: -2px; animation: cart-tick-in .42s cubic-bezier(.2, .9, .3, 1.4) both; } @keyframes cart-tick-in { 0% { opacity: 0; transform: scale(.4) rotate(-18deg); } 60% { opacity: 1; transform: scale(1.18) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } .app-nav__cart-count.is-bumped { animation: cart-count-bump .45s cubic-bezier(.2, .9, .3, 1.5); } @keyframes cart-count-bump { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .cart-btn__tick, .app-nav__cart-count.is-bumped { animation: none; } } .app-nav__cart .material-symbols-rounded { font-size: 20px; } .app-nav__account { display: flex; align-items: center; gap: 14px; margin-left: 4px; } .app-account-menu { position: relative; } .app-account-button { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 9px 6px 7px; color: var(--color-text); background: #fff; border: 1px solid #dcd6ce; border-radius: 16px; text-align: left; } .app-account-button:hover { border-color: var(--color-primary); box-shadow: 0 8px 20px rgba(48,69,76,.08); } .app-account-avatar { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; color: #fff; background: var(--color-primary-dark); border-radius: 12px; font-weight: 800; } .app-account-avatar img { width: 100%; height: 100%; object-fit: cover; } .app-account-copy { display: flex; flex-direction: column; min-width: 82px; } .app-account-copy small { color: #79868a; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .app-account-copy strong { max-width: 112px; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; } .app-account-chevron { color: #748287; font-size: 19px; } .app-account-dropdown { position: absolute; right: 0; top: calc(100% + 10px); width: 210px; padding: 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 18px 45px rgba(38,52,59,.16); } .app-account-dropdown a, .app-account-dropdown button { width: 100%; min-height: 45px; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #42545a; border: 0; border-radius: 12px; background: transparent; font-weight: 700; text-align: left; text-decoration: none; } .app-account-dropdown a:hover, .app-account-dropdown button:hover { color: var(--color-primary-dark); background: #e9efed; } .app-account-dropdown .material-symbols-rounded { font-size: 20px; } .app-nav__signin { display: inline-flex; align-items: center; color: #53656c; font-size: .88rem; font-weight: 600; text-decoration: none; min-height: 42px; padding-inline: 14px; } .app-nav__register { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; color: #fff; background: var(--color-primary-dark); border-radius: 14px; font-size: .86rem; font-weight: 800; text-decoration: none; box-shadow: 0 8px 18px rgba(63,111,119,.18); } .app-nav__register:hover { background: #345f67; transform: translateY(-1px); } .app-nav--child .app-brand__mark { background: #f2d3bc; } .app-nav--child .app-nav__inner { gap: 18px; } .app-nav--child .app-nav__links { flex: 1; justify-content: center; margin-left: 0; } .app-nav--child .app-nav__grown-up .material-symbols-rounded { font-size: 20px; } .app-nav--child .app-nav__grown-up { min-height: 50px; margin-left: auto; color: #315c63; background: #d6e8d7; border-radius: 15px; } .app-nav--child .app-nav__grown-up:hover { color: #294950; background: #c3ddc8; transform: translateY(-2px); } .app-nav--child .app-account-menu { display: none; } .app-nav--child .app-nav__account { display: none; } .auth-child-return { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto 20px; padding: 0 22px; color: #fff; background: var(--color-primary-dark); border-radius: 15px; box-shadow: 0 8px 18px rgba(63,111,119,.2); font-size: .88rem; font-weight: 800; text-decoration: none; transition: transform .2s ease, background-color .2s ease; } .auth-child-return:hover { color: #fff; background: #315c63; transform: translateY(-2px); text-decoration: none; } .auth-child-return .material-symbols-rounded { font-size: 18px; } .app-nav--admin { background: #fff; } .app-nav--admin .app-brand__mark { background: #e3eaec; } /* Shared authenticated page treatment */ body:not(.landing-page) main > div { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0 72px; } /* Admin screens get a wider panel than the 1180px reading width. The admin area is a data grid, not prose: the Orders table alone is eight columns, and at 1180px the browser had to wrap almost every cell -- item names, the "Started" timestamp and the action buttons all broke onto extra lines, which is what the user reported as "almost everything is wrapped". The parent-facing pages keep the narrower measure deliberately, because those are prose and cards and read badly when stretched. Scoped to `.admin-page` for the reason rule 47 gives: these body classes are shared, and an unscoped widening restyles the parent dashboard too. 1560px is wide enough for the eight columns at desktop while still capping the measure on a very large monitor, where an uncapped grid becomes hard to scan across. */ /* Payment method pill. Quiet by design: the status pill is the thing a support agent scans for, so the method is a small neutral chip rather than a second coloured badge competing with it. Built like the status pill (flex-centred, no inherited height) so it inherits the centring rule 61 established -- a plain inline-block chip with padding is exactly what put the status text 10px high. */ .admin-page .admin-method, .admin-surface .admin-method { display: inline-flex; align-items: center; justify-content: center; min-height: 0; height: auto; padding: 4px 11px; border-radius: 999px; background: #eef2f3; color: #4a5f65; border: 1px solid rgba(63,111,119,.16); font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1.35; white-space: nowrap; } /* An order that never recorded a channel is a data gap, not a payment method, and must not read as confidently as a real one. */ .admin-page .admin-method--unknown, .admin-surface .admin-method--unknown { background: transparent; color: #6d8086; border-style: dashed; border-color: rgba(63,111,119,.30); } /* A Paystack reference is one token and must never break. Wrapping it mid-string (badrib-2- / E7BBDEF377A6 / card) made the row three lines tall and the value unscannable, which is the opposite of what a reference is for. `nowrap` plus `overflow-wrap: anywhere` as the escape hatch for a genuinely long value. */ .admin-page .admin-ref, .admin-surface .admin-ref { white-space: nowrap; overflow-wrap: anywhere; } .admin-ref { white-space: nowrap; overflow-wrap: anywhere; } /* The order id as a short mono numeral in a quiet chip. Support conversations say "order 45", and until this column existed the table showed only the Paystack reference, which nobody can look a row up by -- so the number being quoted could not be found in the UI at all. Deliberately NOT a saturated badge: the status pill is what gets scanned, and this is a lookup handle. Scoped like its siblings so a parent page can never inherit it (rule 52, a shared class name is not a shared audience). */ .admin-page .admin-order-no, .admin-surface .admin-order-no { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; line-height: 1.5; color: #315c63; background: #eef3f4; border: 1px solid #dde6e8; border-radius: 8px; padding: 1px 8px; white-space: nowrap; } /* Specificity, not source order: the rule above is `body:not(.landing-page) main > div`, and `:not()` carries the weight of its argument, so it counts as a class selector and beats a single `body.admin-page`. Same specificity (0,2,2) would have worked in source order, but silently losing here is exactly why the width did not move. */ body:not(.landing-page).admin-page main > div { width: min(1560px, calc(100% - 40px)); } body:not(.landing-page) main h1 { margin: 0 0 34px; color: var(--color-text); font: 600 clamp(2.1rem, 4vw, 3.25rem)/1.08 var(--font-display); letter-spacing: -.035em; } body:not(.landing-page) main h2 { color: var(--color-text); font-family: var(--font-display); letter-spacing: -.02em; } body:not(.landing-page) main .bg-white { border: 1px solid rgba(63,111,119,.13); border-radius: 24px; box-shadow: 0 14px 36px rgba(45,64,70,.07); } body.app-page { min-height: 100vh; display: flex; flex-direction: column; } body.app-page main { flex: 1 0 auto; } body.app-page .app-footer { margin-top: auto; } .flash-toast { position: fixed; z-index: 100; top: 42%; left: 50%; width: min(calc(100% - 32px), 520px); display: grid; grid-template-columns: 54px 1fr 38px; align-items: center; gap: 17px; padding: 26px; border: 3px solid #294950; border-radius: 24px; background: var(--color-primary-dark); box-shadow: 0 28px 80px rgba(25,48,53,.32); transform: translate(-50%, -46%); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .flash-toast.is-visible { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; } .flash-toast--success { border-color: #294950; background: var(--color-primary-dark); } .flash-toast--error { border-color: #6f303a; background: #91424d; } .flash-toast__icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 17px; } .flash-toast--success .flash-toast__icon { color: #315c63; background: #c9dfcf; } .flash-toast--error .flash-toast__icon { color: #873d48; background: #f2d7dd; } .flash-toast__icon span { font-size: 27px; } .flash-toast__copy { min-width: 0; } .flash-toast__copy strong { display: block; margin-bottom: 5px; color: #fff; font: 600 1.22rem var(--font-display); } .flash-toast__copy p { margin: 0; color: #e7f0ed; font-size: .9rem; line-height: 1.5; } .flash-toast__close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #edf5f2; background: rgba(255,255,255,.08); cursor: pointer; transition: color .2s ease, background-color .2s ease, transform .2s ease; } .flash-toast__close:hover { color: #fff; background: rgba(255,255,255,.2); transform: rotate(5deg); } .flash-toast__close span { font-size: 20px; } .confirm-backdrop { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(38,52,59,.34); } .confirm-backdrop[hidden] { display: none; } .confirm-panel { width: min(100%, 440px); padding: 30px; border: 3px solid #294950; border-radius: 26px; background: #fff; box-shadow: 0 28px 80px rgba(25,48,53,.28); text-align: center; opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .2s ease, transform .2s ease; } .confirm-backdrop.is-visible .confirm-panel { opacity: 1; transform: translateY(0) scale(1); } .confirm-panel__icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 16px; color: #873d48; background: #f2d7dd; border-radius: 18px; font-size: 29px; } .confirm-panel h2 { margin: 0; color: var(--color-text); font: 600 1.55rem var(--font-display); } .confirm-panel p { margin: 10px 0 24px; color: #607077; line-height: 1.5; } .confirm-panel__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .confirm-panel__actions button { min-height: 48px; border-radius: 14px; font-weight: 800; cursor: pointer; } .confirm-panel__cancel { color: #fff; background: var(--color-primary-dark); } .confirm-panel__confirm { color: #fff; background: var(--color-alert); } .confirm-panel__actions button:hover { transform: translateY(-2px); } @media (max-width: 520px) { .flash-toast { top: 40%; grid-template-columns: 46px 1fr 34px; gap: 12px; padding: 19px; border-width: 2px; border-radius: 21px; } .flash-toast__icon { width: 46px; height: 46px; } .flash-toast__copy strong { font-size: 1.08rem; } .flash-toast__copy p { font-size: .82rem; } } body:not(.landing-page) main .bg-\[\#BED4CB\] { background: #e3ece7 !important; } body:not(.landing-page) main input, body:not(.landing-page) main select, body:not(.landing-page) main textarea { min-height: 48px; color: var(--color-text); background: #fff; border-color: #d7d0c7; border-radius: 14px; } body:not(.landing-page) main input:focus, body:not(.landing-page) main select:focus, body:not(.landing-page) main textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(95,143,150,.14); outline: none; } body:not(.landing-page) main button, body:not(.landing-page) main a[class*="bg-"] { border-radius: 14px; } body:not(.landing-page) main .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(45,64,70,.13); } body:not(.landing-page) .app-footer { padding: 34px 0; background: #f5efe7; border-top: 1px solid var(--color-border); } .app-footer__inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: flex; align-items: center; gap: 18px; } .app-footer__inner p { margin: 0; color: #718086; font-size: .8rem; } .app-footer__inner small { margin-left: auto; color: #7c898d; } .app-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; } .app-footer__legal a { color: #53656c; font-size: .8rem; font-weight: 600; text-decoration: none; } .app-footer__legal a:hover { color: var(--color-primary-dark); text-decoration: underline; } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 14px 0 0; } .footer-legal a { color: #53656c; font-size: .8rem; font-weight: 600; text-decoration: none; } .footer-legal a:hover { color: var(--color-primary-dark); text-decoration: underline; } body:not(.landing-page) footer { background: #f5efe7; } .auth-page { min-height: 100vh; position: relative; overflow-x: hidden; overflow-y: auto; display: grid; place-items: center; padding: 42px 20px; color: var(--color-text); background: #D6C074; } .auth-page__main { position: relative; z-index: 1; width: 100%; } .auth-page__decor { position: fixed; border-radius: 50%; filter: blur(2px); pointer-events: none; } .auth-page__decor--one { width: 430px; height: 430px; top: -190px; right: -110px; background: rgba(255,255,255,.42); } .auth-page__decor--two { width: 330px; height: 330px; bottom: -170px; left: -80px; background: rgba(255,255,255,.28); } .auth-page__main > .auth-wrap { max-width: 500px; width: 100%; margin: 0 auto; } .auth-page__main > .auth-wrap--gate { max-width: 460px; width: 100%; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; color: var(--color-primary-dark); font: 700 1.45rem var(--font-display); letter-spacing: .04em; } .auth-brand:hover { color: var(--color-primary-dark); transform: translateY(-1px); } .auth-brand__mark { width: 42px; height: 42px; display: block; border-radius: 15px; background: var(--cream); box-shadow: 0 8px 18px rgba(63,111,119,.2); object-fit: cover; object-position: center 32%; } .auth-card { width: 100%; padding: clamp(22px, 5vw, 30px); border: 1px solid rgba(63,111,119,.14); border-radius: 26px; background: rgba(255,255,255,.95); box-shadow: 0 24px 70px rgba(57,78,80,.13); text-align: center; } .auth-card--register { text-align: left; } .auth-card--register .auth-card__icon { margin-left: 0; margin-right: 0; } .auth-card--register .auth-intro { margin-left: 0; margin-right: 0; max-width: none; } /* Doubled class beats the `.auth-card h1` font shorthand below, which would otherwise reset the size: the shorthand carries font-size, so an equal-specificity `font-size` declared earlier in the sheet loses. Size is measured, not guessed: at the card's 440px content box Fredoka SemiBold renders "Create your account" at 403px (2rem) with 37px headroom, 423px (2.125rem) with 17px. Above 2.2rem it overflows and nowrap pushes it past the left-aligned edge. Below ~360px viewport the card narrows, so the vw term keeps it fitting down to 1.2rem on small phones. */ .auth-card.auth-card--register h1 { white-space: nowrap; font: 600 clamp(1.2rem, 4.2vw, 2.125rem)/1.15 var(--font-display); letter-spacing: -.02em; } .auth-card__icon { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 23px; transform: rotate(-3deg); } .auth-card__icon span { font-size: 2rem; } .auth-card__icon--mint { color: var(--color-primary-dark); background: #c9dfcf; } .auth-card__icon--green { color: #6c6127; background: #c9dfcf; } .auth-card__icon--rose { color: #8c3d49; background: #f2d7dd; } .auth-eyebrow { margin: 0 0 7px; color: var(--color-primary-dark); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .auth-card h1 { margin: 0; color: var(--color-text); font: 600 clamp(1.8rem, 5vw, 2.45rem)/1.1 var(--font-display); letter-spacing: -.03em; } .auth-intro { margin: 10px auto 26px; max-width: 360px; color: #6f7c80; font-size: .94rem; line-height: 1.6; } .auth-form { display: grid; gap: 17px; margin-top: 24px; text-align: left; } .auth-form--grid { grid-template-columns: 1fr; } .auth-field { display: grid; gap: 8px; } .auth-field--wide { grid-column: 1 / -1; } .auth-field > span { color: #374f53; font-size: .82rem; font-weight: 700; } .auth-field small { color: #7c898d; font-size: .75rem; margin-top: 1px; line-height: 1.45; } .form-input { width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid #d7d0c7; border-radius: 14px; color: var(--color-text); background: #fff; outline: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .form-input:hover { border-color: #a9c1c2; } .form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(95,143,150,.14); transform: translateY(-1px); } .auth-form__row { display: flex; justify-content: flex-end; font-size: .82rem; } .auth-form__row a, .auth-switch a { color: var(--color-primary-dark); font-weight: 700; } .auth-form__row a:hover, .auth-switch a:hover, .auth-back:hover { text-decoration: underline; } .auth-submit { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 20px; border: 0; border-radius: 15px; color: #fff; background: var(--color-primary); box-shadow: 0 10px 22px rgba(63,111,119,.2); font-weight: 700; cursor: pointer; } .auth-submit:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 14px 27px rgba(63,111,119,.25); } .auth-submit--danger { background: #a64e5a; box-shadow: 0 10px 22px rgba(166,78,90,.18); } .auth-submit--danger:hover { background: #873d48; } .auth-switch { margin: 24px 0 0; color: #6f7c80; font-size: .86rem; text-align: center; } .auth-back { display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; margin: 22px auto 0; color: #65757a; font-size: .83rem; } .auth-back span { font-size: 1rem; } .form-alert { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 13px 15px; border: 1px solid #dfaeb5; border-radius: 14px; color: #873d48; background: #f9e8ea; text-align: left; font-size: .82rem; } .form-alert--success { border-color: #b3d4bd; color: #2d5a3d; background: #e8f3ea; } .form-alert > span { flex: 0 0 auto; } .form-alert ul { margin: 0; padding-left: 18px; } .auth-pin-input { min-height: 66px; font-size: 1.55rem; letter-spacing: .48em; text-align: center; } /* ========================================================================== ADMIN CONTROL SYSTEM Every admin control is sized from these tokens. Before this, each screen invented its own button height (44 / 48 / 50px), so two controls sitting side by side in the same row sat on different baselines and the row read as broken. Change a value here and the whole admin area moves together. Scoped to .admin-page / .admin-surface on purpose: these class names are shared with the parent-facing pages (checkout, dashboard, content, bundles), which keep their own sizing. The layout puts .admin-page on for an admin session, so a new admin screen cannot forget to opt in. ========================================================================== */ .admin-page, .admin-surface { --admin-control-height: 48px; --admin-control-radius: 14px; --admin-control-pad-x: 18px; --admin-control-icon: 20px; --admin-control-font: .84rem; /* The line-box the icon is centred in. Material Symbols sits on the font baseline, so without this the glyph rides high beside the label. */ --admin-control-line: 24px; } /* One box for every admin button: same height, padding, radius and type. */ .admin-page .admin-action-button, .admin-surface .admin-action-button, .admin-page .page-primary-action, .admin-surface .page-primary-action, .admin-page .page-secondary-action, .admin-surface .page-secondary-action, .admin-page .settings-submit, .admin-surface .settings-submit, .admin-page .admin-filter-button, .admin-surface .admin-filter-button { min-height: var(--admin-control-height, 48px); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 var(--admin-control-pad-x, 18px); border: 0; border-radius: var(--admin-control-radius, 14px); font-size: var(--admin-control-font, .84rem); font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; } /* A fixed icon square with the glyph optically centred, so every admin icon lands on the same centre whatever its shape. */ .admin-page .admin-action-button .material-symbols-rounded, .admin-surface .admin-action-button .material-symbols-rounded, .admin-page .page-primary-action .material-symbols-rounded, .admin-surface .page-primary-action .material-symbols-rounded, .admin-page .page-secondary-action .material-symbols-rounded, .admin-surface .page-secondary-action .material-symbols-rounded, .admin-page .settings-submit .material-symbols-rounded, .admin-surface .settings-submit .material-symbols-rounded, .admin-page .admin-filter-button .material-symbols-rounded, .admin-surface .admin-filter-button .material-symbols-rounded { flex: 0 0 var(--admin-control-icon, 20px); width: var(--admin-control-icon, 20px); height: var(--admin-control-icon, 20px); font-size: var(--admin-control-icon, 20px); line-height: var(--admin-control-line, 24px); text-align: center; } /* Labels get a matching line-box so text and icon share one baseline. */ .admin-page .admin-action-button > span:last-child, .admin-surface .admin-action-button > span:last-child, .admin-page .page-primary-action > span:last-child, .admin-surface .page-primary-action > span:last-child, .admin-page .page-secondary-action > span:last-child, .admin-surface .page-secondary-action > span:last-child, .admin-page .settings-submit > span:last-child, .admin-surface .settings-submit > span:last-child, .admin-page .admin-filter-button > span:last-child, .admin-surface .admin-filter-button > span:last-child { line-height: var(--admin-control-line, 24px); } .admin-page .admin-action-button, .admin-surface .admin-action-button { color: #fff; background: var(--color-primary-dark); box-shadow: 0 8px 18px rgba(63,111,119,.18); } .admin-page .admin-action-button:hover, .admin-surface .admin-action-button:hover { background: #315c63; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(63,111,119,.22); } .admin-page .admin-action-button--danger, .admin-surface .admin-action-button--danger { background: #a64e5a; box-shadow: 0 8px 18px rgba(166,78,90,.18); } .admin-page .admin-action-button--danger:hover, .admin-surface .admin-action-button--danger:hover { background: #873d48; } /* Quiet variant for a secondary row action, so a destructive button is not the only thing competing for attention in the same row. */ .admin-page .admin-action-button--quiet, .admin-surface .admin-action-button--quiet { color: #315c63; background: #e1ece8; box-shadow: none; } .admin-page .admin-action-button--quiet:hover, .admin-surface .admin-action-button--quiet:hover { background: #d3e4e0; } .admin-page .page-primary-action, .admin-page .admin-filter-button, .admin-surface .page-primary-action, .admin-surface .admin-filter-button { color: #fff; background: var(--color-primary-dark); box-shadow: 0 8px 18px rgba(63,111,119,.18); } .admin-page .page-primary-action:hover, .admin-page .admin-filter-button:hover, .admin-surface .page-primary-action:hover, .admin-surface .admin-filter-button:hover { background: #345f67; transform: translateY(-1px); } /* "Clear" is a dismissal, not a second primary. It was the same filled teal as Filter, so the pair read as two competing actions of equal weight. */ .admin-page .page-secondary-action, .admin-surface .page-secondary-action { color: #315c63; background: #e1ece8; box-shadow: none; } .admin-page .page-secondary-action:hover, .admin-surface .page-secondary-action:hover { background: #d3e4e0; } /* The settings submit button is used by BOTH the parent and the admin settings screens. This base rule is deliberately unscoped: scoping it to .admin-page left the parent's four submit buttons completely unstyled, because the app layout gives a parent session `app-page` and nothing else. The admin block below re-declares the same properties from the tokens, so an admin button still resolves to --admin-control-height. Do not scope this one. */ .settings-submit { width: 100%; min-height: 50px; padding: 13px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 14px; color: #fff; background: var(--color-primary); font-weight: 700; cursor: pointer; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } .settings-submit:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(63,111,119,.2); } /* A destructive settings submit, for the disable-2FA button. */ .settings-submit--danger { background: #a64e5a; } .settings-submit--danger:hover { background: #873d48; } .admin-page .settings-submit, .admin-surface .settings-submit { width: 100%; color: #fff; background: var(--color-primary); } .admin-page .settings-submit:hover, .admin-surface .settings-submit:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(63,111,119,.2); } .admin-page .settings-submit--danger, .admin-surface .settings-submit--danger { background: #a64e5a; } .admin-page .settings-submit--danger:hover, .admin-surface .settings-submit--danger:hover { background: #873d48; } /* Focus ring on every admin control, via :focus-visible so a mouse click does not leave a ring behind. */ .admin-page :is(.admin-action-button, .page-primary-action, .page-secondary-action, .settings-submit, .admin-filter-button, .admin-inline-input, .admin-filter-input):focus-visible, .admin-surface :is(.admin-action-button, .page-primary-action, .page-secondary-action, .settings-submit, .admin-filter-button, .admin-inline-input, .admin-filter-input):focus-visible { outline: 3px solid rgba(63,111,119,.42); outline-offset: 2px; } /* Checkout parent-PIN challenge: a full-width standard panel, stacked so the PIN field, the confirm button and the recovery link each get their own row. */ .checkout-pin { width: 100%; margin: 0 0 26px; padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; border: 1px solid var(--color-border); border-radius: 22px; background: #fff; box-shadow: var(--shadow-soft); text-align: center; } .checkout-pin__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: #315c63; background: var(--color-accent); } .checkout-pin__icon span { font-size: 24px; } .checkout-pin__copy .page-kicker { margin: 0 0 4px; font-size: .66rem; } .checkout-pin__copy h2 { margin: 0 0 6px; font-size: 1.35rem; } .checkout-pin__copy p:last-child { margin: 0 auto; max-width: 34ch; color: var(--color-text-muted); font-size: .85rem; line-height: 1.5; } .checkout-pin__form { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .checkout-pin__form input { width: 100%; height: 56px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 14px; color: #294950; background: #fff; text-align: center; font-size: 1.3rem; font-weight: 700; letter-spacing: .5em; text-indent: .5em; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .checkout-pin__form input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(63, 111, 119, .14); } .checkout-pin__form button { width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 14px; color: #fff; background: var(--color-primary-dark); font-size: .95rem; font-weight: 800; cursor: pointer; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } .checkout-pin__form button:hover { background: #315c63; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(63,111,119,.2); } .checkout-pin__form a { align-self: center; color: #527980; font-size: .8rem; font-weight: 700; } .checkout-pin__form a:hover { text-decoration: underline; } @media (max-width: 430px) { .checkout-pin { padding: 20px 18px; gap: 15px; } .checkout-pin__form input { height: 52px; } } @media (max-width: 520px) { .auth-page { padding: 24px 14px; } .auth-card { border-radius: 24px; } .auth-form--grid { grid-template-columns: 1fr; } .auth-field--wide { grid-column: 1 / -1; } .auth-field small { margin-top: 1px; line-height: 1.45; } } @media (max-width: 1050px) { .app-nav--parent .app-nav__links { display: none !important; } .app-nav__inner { justify-content: space-between; } } @media (max-width: 760px) { .app-nav__inner { width: min(100% - 24px, 620px); min-height: 68px; height: auto; gap: 12px; justify-content: space-between; } .app-nav__links { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 0; justify-content: center; } .app-nav__links > a { padding: 0 8px; font-size: .8rem; min-height: 36px; } .app-nav__account { margin-left: auto; display: flex; align-items: center; gap: 8px; } .app-account-copy { display: none; } .app-account-button { min-height: 46px; padding-right: 7px; } .app-account-avatar { width: 34px; height: 34px; } .app-account-chevron { font-size: 18px; } .app-nav__signin { display: inline-flex; align-items: center; min-height: 42px; padding-inline: 14px; } .app-nav__register { min-height: 42px; padding-inline: 14px; } .app-nav--child .app-nav__inner { width: min(100% - 24px, 620px); } .app-nav--child .app-nav__links { display: flex; flex: 1; justify-content: center; } .app-nav--child .app-nav__grown-up { min-height: 44px; padding: 0 12px; font-size: .76rem; } body:not(.landing-page) main > div { width: min(100% - 24px, 620px); padding: 34px 0 50px; } body:not(.landing-page) main h1 { margin-bottom: 25px; } } /* Parent, child and admin dashboards */ .page-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; } .page-heading h1 { margin-bottom: 10px !important; } .page-heading p:last-child { margin: 0; color: var(--color-text-muted); } .page-kicker { margin: 0 0 8px; color: #527980; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } /* Section heading: a real header, smaller than the page h1 and in the same Fredoka ink as the top header, so it reads as a heading not a caption. */ .section-header { margin: 0 0 10px; color: var(--color-text); font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; } .page-primary-action, .page-secondary-action { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 19px; border-radius: 15px; font-size: .86rem; font-weight: 800; text-decoration: none; } .page-primary-action { color: #fff; background: var(--color-primary-dark); box-shadow: 0 9px 20px rgba(63,111,119,.2); } .page-primary-action:hover { background: #345f67; transform: translateY(-2px); } .page-secondary-action { color: #fff; background: var(--color-primary-dark); box-shadow: 0 9px 20px rgba(63,111,119,.2); } .page-secondary-action:hover { background: #345f67; transform: translateY(-2px); } .page-primary-action .material-symbols-rounded, .page-secondary-action .material-symbols-rounded { font-size: 20px; } .panel { background: #fff; border: 1px solid rgba(63,111,119,.13); border-radius: 26px; box-shadow: 0 16px 40px rgba(45,64,70,.07); } .dashboard-panel { padding: 30px; } .install-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; color: var(--color-text); background: #c9dfcf; border: 1px solid #a8c5b1; border-radius: 22px; box-shadow: 0 14px 34px rgba(45,64,70,.08); margin-bottom: 18px; } .install-banner > .material-symbols-rounded { width: 44px; height: 44px; display: grid; place-items: center; color: #315c63; background: #fff; border-radius: 14px; font-size: 26px; flex: 0 0 auto; } .install-banner > div { flex: 1 1 auto; min-width: 0; } .install-banner strong { display: block; font: 600 1.05rem var(--font-display); } .install-banner p { margin: 4px 0 0; font-size: .82rem; line-height: 1.45; color: #5b6c72; } .install-banner .install-banner__action { flex: 0 0 auto; color: #fff; background: var(--color-primary-dark); box-shadow: 0 9px 20px rgba(63,111,119,.2); border: none; border-radius: 14px; padding: 0 18px; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .install-banner .install-banner__action:hover { background: #345f67; } .install-banner .install-banner__action .material-symbols-rounded { font-size: 20px; } @media (max-width: 640px) { .install-banner { flex-wrap: wrap; } .install-banner > .material-symbols-rounded { width: 40px; height: 40px; font-size: 24px; } .install-banner > div { flex: 1 1 auto; } .install-banner .install-banner__action { flex: 1 1 auto; width: 100%; justify-content: center; margin-top: 10px; } } .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .panel-heading h2 { margin: 0; font-size: 1.55rem; } .panel-heading a { color: #47747c; font-size: .84rem; font-weight: 800; text-decoration: none; } .section-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #47747c; background: #e1ece8; border-radius: 14px; } .profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .profile-card { min-width: 0; display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 18px; background: #f1f4ef; border: 1px solid #dce5de; border-radius: 20px; } .profile-avatar { width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--color-primary-dark); border-radius: 18px; font: 600 1.35rem var(--font-display); } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-copy { min-width: 0; } .profile-copy h3 { margin: 0 0 4px; font: 600 1.15rem var(--font-display); } .profile-copy p { margin: 0; color: #728086; font-size: .8rem; } .profile-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid #dce5de; } .profile-actions > a:not(.profile-switch) { width: 48px; height: 48px; display: grid; place-items: center; color: #527980; background: #fff; border-radius: 14px; } .profile-actions .material-symbols-rounded { font-size: 27px; } .profile-add-child { color: #fff !important; background: var(--color-primary-dark); } .profile-add-child:hover { color: #fff !important; background: #315c63; } .profile-actions form { display: inline-flex; flex: 0 0 auto; } .profile-delete { width: 48px; height: 48px; display: grid; place-items: center; color: var(--color-alert); background: #fff; border-radius: 14px; } .profile-delete:hover { color: #fff; background: var(--color-alert); } .profile-delete .material-symbols-rounded { font-size: 27px; } .profile-switch { min-height: 48px; margin-left: auto; display: inline-flex; align-items: center; padding: 0 15px; color: #fff; background: var(--color-primary-dark); border-radius: 14px; font-size: .78rem; font-weight: 800; text-decoration: none; } .empty-state { grid-column: 1 / -1; padding: 35px 20px; color: #718086; text-align: center; } .empty-state > .material-symbols-rounded { color: #76969b; font-size: 42px; } .empty-state h3 { margin: 10px 0 5px; color: var(--color-text); font: 600 1.25rem var(--font-display); } .empty-state p { margin: 0; } .empty-state--small { padding: 22px; } .dashboard-columns { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; margin-top: 18px; } .subscription-panel, .purchases-panel { padding: 27px; } .status-card { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 18px; color: #5b6c72; background: #f3eee3; border-radius: 18px; } .status-card > .material-symbols-rounded { width: 44px; height: 44px; display: grid; place-items: center; color: #426b73; background: #b9d6c3; border-radius: 14px; } .status-card strong { color: var(--color-text); } .status-card p { margin: 5px 0 0; font-size: .8rem; line-height: 1.5; } .status-card--active { background: #e7f1e9; } .status-card--active > .material-symbols-rounded { color: #fff; background: #709577; } .subscription-panel form { margin-top: 16px; } .subscription-panel > .page-primary-action { margin-top: 18px; } .purchase-list { display: grid; gap: 9px; } .purchase-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid #ebe5dc; } .purchase-row:last-child { border-bottom: 0; } .purchase-icon { width: 40px; height: 40px; display: grid; place-items: center; color: #527980; background: #e1ece8; border-radius: 13px; font-size: 20px; } .purchase-row div { display: flex; flex-direction: column; } .purchase-row small { margin-top: 2px; color: #7c898d; font-size: .72rem; } .purchase-row b { color: #3f666e; font-size: .86rem; } /* Child mode */ .child-page { background: #D6C074; } .child-page main > div { width: min(1100px, calc(100% - 32px)); padding-top: 30px; } .child-welcome { position: relative; overflow: hidden; min-height: 190px; display: flex; align-items: center; gap: 20px; padding: 32px 38px; color: #fff; background: #c26f61; border-radius: 30px; box-shadow: 0 18px 40px rgba(128,75,66,.18); } .child-welcome::before { content: ''; position: absolute; width: 250px; height: 250px; right: 50px; top: -165px; border: 32px solid rgba(255,255,255,.13); border-radius: 50%; } .child-welcome__avatar { width: 82px; height: 82px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; color: #315c63; background: #b9d6c3; border: 5px solid rgba(255,255,255,.75); border-radius: 27px; font: 600 2rem var(--font-display); transform: rotate(-3deg); } .child-welcome__avatar img { width: 100%; height: 100%; object-fit: cover; } .child-welcome p { margin: 0 0 4px; color: #ffe9df; font-size: .88rem; font-weight: 700; } .child-welcome h1 { margin: 0 !important; color: #fff; font-size: clamp(2.35rem, 6vw, 4.4rem) !important; } .child-welcome__mascot { position: absolute; right: 40px; bottom: -18px; width: 165px; height: auto; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 12px 16px rgba(20, 50, 56, .3)); } .child-page .app-footer { display: none; } .child-page main { padding-bottom: 24px; } .child-section { margin-top: 38px; } .child-section__heading h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #4b403a; font-size: 1.55rem; } .child-section__heading .material-symbols-rounded { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: #b96d60; border-radius: 12px; font-size: 21px; } .child-content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .child-content-card { overflow: hidden; display: grid; grid-template-columns: 42% 1fr; min-height: 158px; color: var(--color-text); background: #fff; border: 3px solid rgba(255,255,255,.75); border-radius: 24px; box-shadow: 0 10px 25px rgba(90,70,50,.1); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .child-content-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 18px 35px rgba(90,70,50,.16); } .child-content-card__art { min-width: 0; display: grid; place-items: center; overflow: hidden; color: #fff; background: #bcd9e7; } .child-content-card__art img { width: 100%; height: 100%; object-fit: cover; } .child-content-card__art > .material-symbols-rounded { font-size: 45px; } .child-content-card--child-activities .child-content-card__art { background: #e4a888; } .child-content-card--child-games .child-content-card__art { background: #9b8db8; } .child-content-card__copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 18px; } .child-content-card__copy h3 { margin: 0 0 15px; font: 600 1.2rem/1.2 var(--font-display); } .child-content-card__copy > span { display: flex; align-items: center; gap: 5px; color: #b25f52; font-size: .78rem; font-weight: 800; } /* Framed child playback: a fixed top bar, with the content filling the rest. Only used in the browser; an installed PWA serves content full screen. */ .child-player { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } .child-player__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #3f6f77; color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.18); } .child-player__back { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; color: #fff; background: rgba(255,255,255,.16); border-radius: 24px; font-size: .95rem; font-weight: 700; text-decoration: none; } .child-player__back .material-symbols-rounded { font-size: 22px; } .child-player__title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font: 600 1.1rem/1.25 var(--font-display); text-align: center; text-overflow: ellipsis; white-space: nowrap; } .child-player__frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; } @media (max-width: 480px) { .child-player__back span:not(.material-symbols-rounded) { display: none; } .child-player__back { padding: 0 16px; border-radius: 50%; } .child-player__title { text-align: left; } } .child-content-card__copy .material-symbols-rounded { font-size: 17px; } .child-empty { margin-top: 35px; padding: 55px 20px; color: #6c625c; background: #fff8e9; border-radius: 28px; text-align: center; } .child-empty > .material-symbols-rounded { color: #c26f61; font-size: 54px; } .child-empty h2 { margin: 12px 0 5px; font-size: 1.65rem; } .child-empty p { margin: 0; } /* Admin */ .admin-status { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; color: #4f6e57; background: #e4efe5; border-radius: 13px; font-size: .78rem; font-weight: 800; } .admin-status span { width: 9px; height: 9px; background: #6e9c76; border-radius: 50%; box-shadow: 0 0 0 4px rgba(110,156,118,.14); } .admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .admin-stats article { display: flex; align-items: center; gap: 15px; padding: 21px; background: #fff; border: 1px solid rgba(63,111,119,.13); border-radius: 20px; box-shadow: 0 10px 28px rgba(45,64,70,.06); } .admin-stats article > .material-symbols-rounded { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; color: #527980; background: #e1ece8; border-radius: 15px; } .admin-stats strong { display: block; color: var(--color-text); font: 600 1.65rem var(--font-display); } .admin-stats p { margin: 1px 0 0; color: #778489; font-size: .75rem; } .admin-shortcuts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; } .admin-shortcuts a { display: grid; grid-template-columns: 50px 1fr 22px; gap: 14px; align-items: center; padding: 20px; color: var(--color-text); background: #fff; border: 1px solid rgba(63,111,119,.13); border-radius: 20px; text-decoration: none; box-shadow: 0 10px 28px rgba(45,64,70,.05); } .admin-shortcuts a:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(45,64,70,.1); } .admin-shortcuts a > .material-symbols-rounded:first-child { width: 50px; height: 50px; display: grid; place-items: center; color: #fff; background: #526f79; border-radius: 15px; } .admin-shortcuts strong { font-size: .93rem; } .admin-shortcuts p { margin: 3px 0 0; color: #778489; font-size: .75rem; } .admin-shortcuts a > .material-symbols-rounded:last-child { color: #8a969a; font-size: 20px; } .admin-recent { padding: 28px; } .admin-user-list { display: grid; } .admin-user-list a { display: grid; grid-template-columns: 42px 1fr auto 22px; gap: 12px; align-items: center; padding: 12px 5px; color: var(--color-text); border-bottom: 1px solid #ebe5dc; text-decoration: none; } .admin-user-list a:hover { background: #f4f0e8; } .admin-user-avatar { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: #607d85; border-radius: 13px; font-weight: 800; } .admin-user-list div { display: flex; flex-direction: column; } .admin-user-list small, .admin-user-list time { color: #7c898d; font-size: .72rem; } .bundle-library-section { margin-top: 64px; padding-top: 34px; border-top: 1px solid #d9e1dc; } .bundle-art { background: #c9dfcf; color: #315c63; } .bundle-detail-panel { padding: 28px; margin-bottom: 22px; } .bundle-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .bundle-detail-summary > div { display: grid; grid-template-columns: 42px auto; align-items: center; gap: 3px 12px; } .bundle-detail-summary > div > .material-symbols-rounded { grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--color-primary-dark); border-radius: 13px; } .bundle-detail-summary small { color: #718086; } .bundle-price { color: var(--color-primary-dark); font: 600 1.7rem var(--font-display); } .bundle-purchased { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding: 14px 16px; color: #315c63; background: #dcebe0; border-radius: 16px; font-weight: 800; } .bundle-content-list { display: grid; gap: 2px; } .bundle-content-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; min-height: 68px; padding: 14px 16px; color: var(--color-text); border: 1px solid rgba(63,111,119,.13); border-radius: 18px; text-decoration: none; } .bundle-content-row > .material-symbols-rounded:first-child { width: 42px; height: 42px; display: grid; place-items: center; color: #527980; background: #e1ece8; border-radius: 13px; font-size: 21px; } .bundle-content-row > div { display: flex; flex-direction: column; } .bundle-content-row small { color: #718086; margin-top: 3px; } .bundle-content-row:hover { color: var(--color-primary-dark); transform: translateX(2px); } .bundle-card .catalogue-card__copy h3, .catalogue-card__copy h2 { min-height: 0; } .admin-form-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; } .admin-form-fields { display: grid; gap: 18px; align-content: start; } .admin-active-toggle { display: flex !important; align-items: center; gap: 8px; min-height: 34px; color: #52656c !important; font-size: .82rem !important; } .admin-active-toggle input[type="checkbox"] { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; flex: 0 0 18px !important; margin: 0 !important; accent-color: var(--color-primary-dark); } .admin-inline-input { width: 100%; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid rgba(63,111,119,.22); border-radius: 10px; font-weight: 700; color: var(--color-text); background: #fff; } /* Age-group rows carry two small number boxes (min/max) and an order box. The row is a flex line, and `.admin-inline-input` is width:100%, so without an explicit basis each box would claim a third of the row and push the name out of shape. `--age` is narrow enough for two digits; `--order` matches the single-digit order box on the other admin screens. */ .admin-row-edit .admin-inline-input--age { flex: 0 0 68px; width: 68px; } .admin-row-edit .admin-inline-input--order { flex: 0 0 62px; width: 62px; } /* Sections on the settings page. These were four headings stacked inside one white card, so "Change Password" began immediately below the profile form with no visible break between unrelated settings. */ .admin-sections { display: grid; gap: 22px; } .admin-section { padding: 26px 28px; background: #fff; border: 1px solid rgba(63,111,119,.13); border-radius: 22px; box-shadow: 0 12px 30px rgba(45,64,70,.05); } .admin-section__head { display: flex; align-items: center; gap: 13px; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid #ebe5dc; } .admin-section__icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; color: #47747c; background: #e1ece8; border-radius: 13px; } .admin-section__icon .material-symbols-rounded { font-size: 21px; } .admin-section__head h2 { margin: 0; color: var(--color-text); font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; line-height: 1.2; } .admin-section__head p { margin: 3px 0 0; color: #718086; font-size: .82rem; line-height: 1.45; } .admin-section__body > * + * { margin-top: 18px; } /* Sortable table headers, used by Users, Content and Purchases alike. The arrow shows which column is active and in which direction, which a bare underline cannot, and aria-sort announces it to a screen reader. */ .admin-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; } .admin-sort .material-symbols-rounded { width: 16px; height: 16px; font-size: 16px; opacity: .5; transition: opacity .18s ease, transform .18s ease; } .admin-sort:hover .material-symbols-rounded { opacity: .9; } .admin-sort[aria-sort="ascending"] .material-symbols-rounded, .admin-sort[aria-sort="descending"] .material-symbols-rounded { opacity: 1; } .admin-sort[aria-sort="descending"] .material-symbols-rounded { transform: rotate(180deg); } .admin-table thead th { white-space: nowrap; } .admin-field-status { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #eef4ee; } .admin-field-status strong { color: #52656c; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; } .admin-field-status span { color: var(--color-text); font-weight: 700; } .admin-uppercase { text-transform: uppercase; } .discount-form { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; } .discount-form input { flex: 1 1 180px; min-width: 0; min-height: 48px; padding: 0 16px; border: 1px solid #d8e1dc; border-radius: 14px; font-weight: 700; letter-spacing: .04em; } .discount-form input:focus { outline: none; border-color: var(--color-primary-dark); box-shadow: 0 0 0 3px rgba(63,111,119,.16); } .discount-applied { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: #eaf2ea; } .discount-applied > div { display: flex; flex-direction: column; gap: 2px; margin-right: auto; } .discount-applied > div span { color: #5d6d63; font-size: .8rem; font-weight: 700; } .discount-applied > span { color: #315c63; font-weight: 800; } .discount-note { margin-top: 10px; color: #8a5b4f; font-size: .82rem; font-weight: 700; } .discount-summary { display: grid; gap: 8px; margin: 18px 0 0; } .discount-summary > div { display: flex; justify-content: space-between; gap: 12px; color: #52656c; font-size: .9rem; font-weight: 700; } .discount-summary__saved { color: #315c63 !important; } .discount-summary__total { padding-top: 10px; margin-top: 4px; border-top: 1px solid #e6e0d8; color: var(--color-text) !important; font-size: 1.05rem !important; } .admin-inline-input:focus { outline: none; border-color: var(--color-primary-dark); box-shadow: 0 0 0 3px rgba(63,111,119,.16); } .admin-field-help { display: block; margin-top: 7px; color: #718086; font-size: .76rem; line-height: 1.45; } .admin-form-fields label, .admin-content-picker legend { display: block; margin-bottom: 7px; color: #52656c; font-size: .82rem; font-weight: 800; } .admin-form-fields input, .admin-form-fields textarea { width: 100%; padding: 12px 14px; border: 1px solid #d8e1dc; border-radius: 13px; background: #fff; } .admin-content-picker { padding: 18px; border: 1px solid #d8e1dc; border-radius: 18px; } .admin-content-picker > p { margin: 0 0 12px; color: #718086; font-size: .8rem; } .admin-content-picker > label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 0; border-bottom: 1px solid #edf0ed; cursor: pointer; } .admin-content-picker > label:last-child { border-bottom: 0; } .admin-content-picker input { accent-color: var(--color-primary-dark); } .admin-content-picker label span { display: flex; flex-direction: column; } .admin-content-picker small { color: #718086; margin-top: 2px; } .admin-row-actions { width: max-content; max-width: none; display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: nowrap !important; white-space: nowrap; gap: 8px; } .admin-row-actions form { width: auto; display: block !important; flex: 0 0 auto; margin: 0; } .admin-row-actions > .page-secondary-action, .admin-row-actions form .admin-action-button { width: auto; min-width: 58px; flex: 0 0 auto; white-space: nowrap; } /* Row actions resolve height, padding and type from the same admin tokens as every other control. This rule used to pin them to 40px while the toolbar buttons beside them were 48px, which is why a table row's buttons looked smaller than the controls in the panel above it. */ .admin-row-actions .page-secondary-action, .admin-row-actions .admin-action-button { min-height: var(--admin-control-height, 48px); padding: 0 var(--admin-control-pad-x, 18px); font-size: var(--admin-control-font, .84rem); } .admin-user-list .material-symbols-rounded { color: #8a969a; } .admin-user-detail { padding: 30px; margin-bottom: 18px; } .admin-account-status, .admin-count { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 11px; font-size: .74rem; font-weight: 800; } .admin-account-status.is-active { color: #315c63; background: #d6e8d7; } .admin-account-status.is-suspended { color: #873d48; background: #f2d7dd; } .admin-count { min-width: 34px; justify-content: center; color: #426b73; background: #e1ece8; } .admin-detail-list { margin: 0; border-top: 1px solid #ebe5dc; } .admin-detail-list > div { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding: 16px 4px; border-bottom: 1px solid #ebe5dc; } .admin-detail-list dt { color: #7c898d; font-size: .8rem; font-weight: 700; } .admin-detail-list dd { margin: 0; color: var(--color-text); font-size: .88rem; font-weight: 700; } .admin-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } /* Button heights, icon sizing and colours now come from the ADMIN CONTROL SYSTEM block above. Only row layout belongs in this section. */ .admin-detail-columns { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; } .admin-record-list { display: grid; } /* A record row is icon | text | trailing meta | actions. A row that renders no trailing meta needs an explicit spacer: with only three children the actions slid into the narrow `auto` column, so buttons sat at a different x on every row of the screen. */ .admin-record-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto minmax(150px, max-content); gap: 12px 16px; align-items: center; min-height: 68px; padding: 12px 4px; border-bottom: 1px solid #ebe5dc; } .admin-record-row > .admin-record-spacer { min-width: 0; } .admin-record-row:last-child { border-bottom: 0; } .admin-record-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #527980; background: #e1ece8; border-radius: 13px; } .admin-record-icon .material-symbols-rounded { font-size: 21px; } .admin-record-row > div { display: flex; flex-direction: column; } .admin-record-row small { margin-top: 3px; color: #7c898d; font-size: .72rem; } .admin-record-row b { color: #3f666e; font-size: .86rem; } /* The category edit form occupies the row's text column. It laid its input, the "N items" count and the Active toggle out as a COLUMN, which made the block 109px tall. The row is 68px, so `align-items: center` then parked the Save and Delete buttons against the MIDDLE of that stack -- level with the count and the checkbox rather than with the name field they edit. Laying the three out on one line brings the block back to the height of a single control, and the actions land beside the input. */ .admin-row-edit { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; } .admin-row-edit small { margin-top: 0; white-space: nowrap; } .admin-row-edit .admin-active-toggle { margin-left: auto; } /* === ORDERS SCREEN === Filter chips, status pills and the urgent-row highlight. Scoped to the admin page like the rest of the control system, so the parent area is untouched. */ .admin-page .admin-filter-chips, .admin-surface .admin-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .admin-page .admin-chip, .admin-surface .admin-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid #d8d1c8; border-radius: 999px; background: #fff; color: #41575d; font-size: .82rem; font-weight: 700; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; } .admin-page .admin-chip:hover, .admin-surface .admin-chip:hover { background: #f1ebe3; border-color: #c9bfb2; } .admin-page .admin-chip.is-active, .admin-surface .admin-chip.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); } .admin-page .admin-chip__count, .admin-surface .admin-chip__count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #e7e1d8; color: #41575d; font-size: .72rem; font-weight: 800; text-align: center; } .admin-page .admin-chip.is-active .admin-chip__count, .admin-surface .admin-chip.is-active .admin-chip__count { background: rgba(255,255,255,.24); color: #fff; } /* Paid money with no content. The one state worth interrupting someone over. */ .admin-page .admin-chip.is-urgent, .admin-surface .admin-chip.is-urgent { color: #8f3b3b; background: #fdeceb; border-color: #e8b3b0; } .admin-page .admin-chip.is-urgent.is-active, .admin-surface .admin-chip.is-urgent.is-active { color: #fff; background: #b35656; border-color: #b35656; } /* Status pills. Each state gets its own colour so a support agent can read the queue without reading a word. `pending` is deliberately amber, not red: an in-flight EFT has not failed. Two rules used to fight over this pill. The generic `.admin-status` above is a 42px row-height badge (min-height 42px) and this one wants a tight uppercase capsule. Whichever won on `display` decided whether the text sat centred or on the top edge, and a stale `min-height` survived the override -- so the pill measured 42px with the text parked 10px high, which is what the user saw as "not centred vertically inside the capsule". This block therefore has to own the box completely: no inherited height, no inline-block baseline, and centring by flex rather than by padding. The generic rule stays for anything else that borrows the class. */ .admin-page .admin-status, .admin-surface .admin-status { display: inline-flex; align-items: center; justify-content: center; min-height: 0; height: auto; padding: 5px 12px; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; line-height: 1.35; } /* A table cell is not a flex column, so the pill sat on the text baseline and the note below it hung off-centre. Centring the CONTENT in the cell, with the pill and its note as one inline group, keeps the stack on one optical axis whatever combination of pill and note a row has. */ .admin-page .admin-table td:has(.admin-status), .admin-surface .admin-table td:has(.admin-status) { vertical-align: middle; } .admin-page .admin-status-cell, .admin-surface .admin-status-cell { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; height: 100%; } .admin-page .admin-status-note, .admin-surface .admin-status-note { margin: 0; color: #6b7a7e; font-size: .72rem; line-height: 1.35; } .admin-page .admin-status--success, .admin-surface .admin-status--success { background: #dcefe0; color: #2c6b3f; } .admin-page .admin-status--pending, .admin-surface .admin-status--pending { background: #fbeed2; color: #8a5d10; } .admin-page .admin-status--abandoned, .admin-surface .admin-status--abandoned { background: #e6e3de; color: #6b6259; } .admin-page .admin-status--failed, .admin-surface .admin-status--failed { background: #f7dedd; color: #93383a; } .admin-page .admin-row--urgent td, .admin-surface .admin-row--urgent td { background: #fdf4f3; } .admin-page .admin-row--urgent td:first-child, .admin-surface .admin-row--urgent td:first-child { box-shadow: inset 3px 0 0 #b35656; } /* Paid twice, already owned. Amber rather than red: it needs a refund decision, not an emergency. */ .admin-page .admin-row--warn td, .admin-surface .admin-row--warn td { background: #fdf8ee; } .admin-page .admin-row--warn td:first-child, .admin-surface .admin-row--warn td:first-child { box-shadow: inset 3px 0 0 #c99a3d; } .admin-page .admin-table td code, .admin-surface .admin-table td code { background: #f4f0ea; padding: 2px 6px; border-radius: 6px; } /* The "Bundle" pill next to a purchase title. It has to be its own class: an unstyled inherits the row's body colour and size, so the label read as part of the sentence rather than as a tag. */ .purchase-kind-badge { display: inline-block; margin-left: 7px; padding: 2px 9px; vertical-align: middle; border-radius: 999px; background: var(--color-accent); color: #315c63; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* Bundle drill-down: the contents a customer actually paid for, rather than listing each fan-out content_purchases row at R0.00. */ .admin-drill summary { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; cursor: pointer; list-style: none; } .admin-drill summary::-webkit-details-marker { display: none; } .admin-drill summary::after { content: 'expand_more'; font-family: 'Material Symbols Rounded'; font-size: 18px; color: #527980; transition: transform .2s ease; } .admin-drill[open] summary::after { transform: rotate(180deg); } .admin-drill__count { padding: 2px 9px; border-radius: 999px; color: #315c63; background: var(--color-accent); font-size: .68rem; font-weight: 800; } .admin-drill ul { margin: 8px 0 0; padding-left: 20px; color: #5b6a6e; font-size: .8rem; } .admin-drill__note { margin: 8px 0 0; color: #8a6a3d; font-size: .7rem; font-style: italic; } /* Catalogue */ .catalog-heading { margin-bottom: 24px; } .catalog-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; padding: 18px; margin-bottom: 28px; background: #fff; border: 1px solid rgba(63,111,119,.13); border-radius: 22px; box-shadow: 0 12px 32px rgba(45,64,70,.06); } .catalog-filters label { display: grid; gap: 6px; } .catalog-filters label span { color: #64767b; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .catalog-filters select { min-height: 48px; width: 100%; padding: 0 13px; color: var(--color-text); background: #f8f5f0; border: 1px solid #d8d1c8; border-radius: 14px; } .catalog-filters button { min-height: 48px; min-width: 0; width: auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 17px; justify-content: center; color: #fff; background: var(--color-primary-dark); border: 0; border-radius: 14px; font-weight: 800; } .bundle-filters { grid-template-columns: minmax(0, 220px) auto; justify-content: start; } .admin-table-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding: 16px; background: #fff; border: 1px solid rgba(63,111,119,.13); border-radius: 20px; } .admin-table-filters label { display: grid; gap: 6px; min-width: 150px; } .admin-table-filters label span { color: #64767b; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } /* Filter inputs take the same control height as the buttons beside them. They were 44px while Clear stayed 48px, which is the visible step in the toolbar. */ .admin-table-filters input, .admin-table-filters select { min-height: var(--admin-control-height, 48px); padding: 0 13px; border: 1px solid #d8d1c8; border-radius: 12px; background: #f8f5f0; } .admin-table-filters + .bg-white th a { color: #fff; text-decoration: none; } .admin-table-filters + .bg-white th a:hover { color: #d6e8d7; text-decoration: underline; } .catalogue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; } .catalogue-card { overflow: hidden; color: var(--color-text); background: #fff; border: 1px solid rgba(63,111,119,.13); border-radius: 23px; text-decoration: none; box-shadow: 0 12px 30px rgba(45,64,70,.07); transition: transform .25s ease, box-shadow .25s ease; } .catalogue-card:hover { transform: translateY(-5px); box-shadow: 0 22px 42px rgba(45,64,70,.14); } .catalogue-card__art { position: relative; height: 180px; display: grid; place-items: center; overflow: hidden; color: #fff; background: #bcd9e7; } .catalogue-card__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .catalogue-card:hover img { transform: scale(1.04); } .catalogue-card__art > .material-symbols-rounded { font-size: 50px; } .catalogue-activity { background: #e4a888; }.catalogue-game { background: #a99bc3; } .catalogue-type { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border: 2px solid #fff; border-radius: 10px; color: #fff; background: var(--color-primary-dark); box-shadow: 0 4px 12px rgba(48, 69, 76, .22); font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } /* One colour per content type, so the type is recognisable without reading it. Activity is the deliberate outlier: near-black rather than teal, still with the white border. Story, game and bundle keep the theme teal. The border is what keeps any of them legible over a pale or busy thumbnail. */ .catalogue-type--activity { background: #14181a; } .catalogue-card__copy { padding: 19px; } .catalogue-card__copy > p { margin: 0 0 7px; color: #718086; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .catalogue-card__copy h2 { min-height: 44px; margin: 0 0 16px; font-size: 1.2rem; line-height: 1.2; } .catalogue-card__copy > div { display: flex; align-items: center; justify-content: space-between; } .catalogue-card__copy strong { color: #426b73; } .catalogue-card__copy .material-symbols-rounded { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--color-primary-dark); border-radius: 11px; font-size: 18px; } .catalogue-empty { grid-column: 1 / -1; padding: 70px 20px; color: #718086; background: #fff; border-radius: 26px; text-align: center; } .catalogue-empty > .material-symbols-rounded { font-size: 52px; } .catalogue-empty h2 { margin: 12px 0 5px; } .catalogue-pagination { margin-top: 30px; } /* Pagination. Every control is the same size, shape and radius, separated by a real gap -- the previous row had a circle for the active page and rounded rectangles for the rest, touching each other, because it was Laravel's stock view styled by the Tailwind CDN. One `.badrib-page` class covers every state so a shape can never drift between them again. */ .badrib-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; } .badrib-pagination__summary { margin: 0; color: var(--muted); font-size: .85rem; } .badrib-pagination__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .badrib-page { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 1px solid #ddd7ce; border-radius: 14px; color: var(--color-primary-dark); background: #fff; font-size: .9rem; font-weight: 700; line-height: 1; text-decoration: none; box-shadow: 0 6px 16px rgba(45,64,70,.05); transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .badrib-page:hover { border-color: var(--color-primary); background: var(--color-primary-soft); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(45,64,70,.1); } .badrib-page .material-symbols-rounded { font-size: 20px; } .badrib-page--current { color: #fff; border-color: transparent; background: var(--color-primary-dark); box-shadow: 0 8px 20px rgba(63, 111, 119, .24); } .badrib-page--current:hover { color: #fff; background: var(--color-primary-dark); border-color: transparent; } .badrib-page--disabled { color: #9aa2a6; border-color: #e6e1da; background: #f4f1ec; box-shadow: none; cursor: default; } .badrib-page--disabled:hover { transform: none; border-color: #e6e1da; background: #f4f1ec; box-shadow: none; } .badrib-page--ellipsis { min-width: 24px; padding: 0; border-color: transparent; background: transparent; color: #9aa2a6; box-shadow: none; } @media (max-width: 760px) { .badrib-pagination { justify-content: center; } .badrib-pagination__summary { width: 100%; text-align: center; } .badrib-pagination__controls { justify-content: center; } .badrib-page__label { display: none; } .badrib-page { padding: 0 12px; } } @media (max-width: 1000px) { .admin-stats, .catalogue-grid { grid-template-columns: repeat(2, 1fr); } .profile-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .page-heading { align-items: stretch; flex-direction: column; } .dashboard-columns, .admin-shortcuts { grid-template-columns: 1fr; } .admin-stats { grid-template-columns: repeat(2, 1fr); } .catalog-filters { grid-template-columns: 1fr; } .catalog-filters button { justify-content: center; } .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .catalogue-card__art { height: 145px; } .child-welcome { min-height: 160px; padding: 24px; border-radius: 24px; } .child-welcome__avatar { width: 66px; height: 66px; border-radius: 22px; } .child-welcome__mascot { display: none; } .app-nav--child .app-nav__links { gap: 6px; } .child-content-grid { grid-template-columns: 1fr; } .child-content-card { min-height: 140px; grid-template-columns: 38% 1fr; } } @media (max-width: 430px) { .admin-stats, .catalogue-grid { grid-template-columns: 1fr; } .admin-detail-columns, .admin-form-grid { grid-template-columns: 1fr; } .catalogue-card { display: grid; grid-template-columns: 42% 1fr; } .catalogue-card__art { height: 100%; min-height: 150px; } .catalogue-card__copy h2 { min-height: 0; } } /* ---------------------------------------------------------------- price A price is the one number a parent scans for, so it gets its own capsule. Kept deliberately quiet: cream surface (the page background) with the palette's dark brown, a hairline rather than a heavy border, and a size below the surrounding heading. Loud enough to find, soft enough that it does not compete with the title. */ .price-capsule { display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap; background: #D6C074; border: 1px solid #1f2937; border-radius: 9999px; padding: 6px 18px; } .price-capsule__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7a6a5e; } .price-capsule__value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.1; color: #4b403a; } .price-capsule__note { font-size: 0.75rem; color: #7a6a5e; } .price-capsule__note--owned { font-weight: 700; color: #4b403a; } /* Divider between the amount and the ownership note. Spacing comes from the capsule's own flex gap, so the pipe only has to be a hairline. */ .price-capsule__pipe { align-self: center; width: 1px; height: 14px; background: rgba(75, 64, 58, .32); } @media (max-width: 430px) { .price-capsule { padding: 5px 14px; } .price-capsule__value { font-size: 1.125rem; } } /* A parent's own purchase numbers. "Which order was that?" and "what was the reference?" are the first two questions of any support call, so both are on the page rather than only in the admin. Unscoped on purpose: this is a parent-facing class and no admin rule should be able to reach it (rule 52). The reference never wraps -- it is one token, copied as a whole. */ .purchase-refs { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .78rem; line-height: 1.5; } .purchase-refs__id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: #315c63; background: #eef3f4; border: 1px solid #dde6e8; border-radius: 8px; padding: 1px 8px; white-space: nowrap; } .purchase-refs__ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #6d8086; background: #f6f8f8; border: 1px solid #e3eaec; border-radius: 8px; padding: 1px 8px; white-space: nowrap; overflow-wrap: anywhere; } /* Contact form (landing page) */ .contact-form { max-width: 640px; margin: 0 auto; display: grid; gap: 16px; } .contact-form .form-group { display: flex; flex-direction: column; gap: 6px; } .contact-form .form-group label { font-weight: 600; color: var(--color-primary-dark, #3f6f77); } .contact-form input, .contact-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #d7d0c7; border-radius: 14px; background: #fff; color: var(--color-text, #222); font: inherit; box-sizing: border-box; } .contact-form textarea { min-height: 120px; resize: vertical; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-primary, #3f6f77); box-shadow: 0 0 0 4px rgba(95,143,150,.14); outline: none; } .contact-form .error { color: #B35656; font-size: .85rem; } .contact-form button { justify-self: start; } .alert-success { background: #D5E5D7; color: #315c63; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; } .contact-panel { background: #fff; border-radius: 20px; padding: 32px; box-shadow: 0 8px 24px rgba(0,0,0,.08); max-width: 640px; margin: 0 auto; } /* Parent / child responsive */ @media (max-width: 760px) { .profile-grid, .dashboard-columns { grid-template-columns: 1fr; } .admin-record-row { grid-template-columns: 42px 1fr; } .admin-record-row > :nth-child(3), .admin-record-row > :nth-child(4) { grid-column: 1 / -1; } .child-content-card { grid-template-columns: 1fr; min-height: 0; } .purchase-row { grid-template-columns: 40px 1fr; } .purchase-row > :last-child { grid-column: 1 / -1; } } /* Admin responsive */ @media (max-width: 900px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } .admin-shortcuts { grid-template-columns: 1fr; } .admin-shortcuts a { grid-template-columns: 42px 1fr 20px; } } @media (max-width: 600px) { .admin-stats { grid-template-columns: 1fr; } }