/* Guru Shishya brand: design tokens + logo styles. Light theme is the approved design. Dark theme is a derived proposal (same hues, inverted roles). Dark mode switches on the OS setting, or on / data-theme="light" if the site has a toggle. If the site already has its own theme mechanism, keep that mechanism and copy the two variable blocks into it. */ :root { color-scheme: light; /* colour */ --gs-bg: #F6EFE2; /* page ground (parchment) */ --gs-surface: #FBF7EE; /* cards, panels */ --gs-surface-2: #EADFCB; /* tiles, table stripes, inset areas */ --gs-ink: #1E1B3A; /* primary text, primary buttons (indigo) */ --gs-ink-muted: #4A4358; /* secondary text */ --gs-accent: #C8621B; /* saffron: graphics, large display text, top dot. NOT for small text */ --gs-accent-text: #A34D10; /* saffron darkened for links / small text on light ground */ --gs-on-ink: #F6EFE2; /* text on ink-coloured fills */ --gs-border: rgba(30, 27, 58, 0.16); /* type */ --gs-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --gs-font-deva: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --gs-bg: #1E1B3A; --gs-surface: #27234A; --gs-surface-2: #322D5C; --gs-ink: #F6EFE2; --gs-ink-muted: #C9C2D6; --gs-accent: #F0A868; --gs-accent-text: #F0A868; --gs-on-ink: #1E1B3A; --gs-border: rgba(246, 239, 226, 0.16); } } :root[data-theme="dark"] { color-scheme: dark; --gs-bg: #1E1B3A; --gs-surface: #27234A; --gs-surface-2: #322D5C; --gs-ink: #F6EFE2; --gs-ink-muted: #C9C2D6; --gs-accent: #F0A868; --gs-accent-text: #F0A868; --gs-on-ink: #1E1B3A; --gs-border: rgba(246, 239, 226, 0.16); } /* Headings and the wordmark use the display serif. Body text keeps the site's current font. */ .gs-display { font-family: var(--gs-font-display); letter-spacing: -0.02em; } /* Low-specificity focus ring so the site's own focus styles still win. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--gs-accent-text); outline-offset: 2px; } /* ---------- Logo lockup ---------- */ .gs-logo { display: inline-flex; align-items: center; gap: 0.5em; color: var(--gs-ink); text-decoration: none; font-family: var(--gs-font-display); font-size: 24px; /* compact size; scale by changing font-size on the element */ line-height: 1; } .gs-logo__mark { height: 1.15em; width: auto; flex: none; } .gs-logo__mark .gs-dot { fill: var(--gs-ink); } .gs-logo__mark .gs-dot--top { fill: var(--gs-accent); } .gs-logo__name { font-weight: 600; letter-spacing: -0.02em; } .gs-logo__name em { font-style: italic; font-weight: 500; color: var(--gs-accent-text); } .gs-logo__deva, .gs-logo__tagline { display: none; } /* Stacked hero version (login / sign-up / landing) */ .gs-logo--stacked { flex-direction: column; gap: 14px; text-align: center; font-size: clamp(44px, 11vw, 84px); } .gs-logo--stacked .gs-logo__mark { height: 72px; } .gs-logo--stacked .gs-logo__deva { display: block; font-family: var(--gs-font-deva); font-size: clamp(24px, 5vw, 36px); line-height: 1.3; color: var(--gs-ink); } .gs-logo--stacked .gs-logo__tagline { display: block; margin-top: 6px; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gs-ink-muted); }