/* ===== Design System — Școala Ștefan cel Mare ===== */ :root { /* Palette A — Clasic (Bordo + Auriu pe ivoriu) */ --a-bg: #FAF6EC; --a-surface: #FFFFFF; --a-ink: #1F1A12; --a-ink-soft: #5A5042; --a-ink-mute: #8A8072; --a-line: #E8DFC9; --a-primary: #7A1F1F; /* bordo */ --a-primary-ink: #FAF6EC; --a-accent: #B8873A; /* auriu închis */ --a-accent-soft: #E8C77A; /* Palette B — Navy academic + auriu */ --b-bg: #F6F4EE; --b-surface: #FFFFFF; --b-ink: #141826; --b-ink-soft: #3E4357; --b-ink-mute: #7C8094; --b-line: #E3E0D4; --b-primary: #1A2748; --b-primary-ink: #F6F4EE; --b-accent: #C39A3A; --b-accent-soft: #EBD38A; /* Palette C — Cărămiziu pe crem (cel mai aproape de logo) */ --c-bg: #FBF2E0; --c-surface: #FFFBEF; --c-ink: #2A160A; --c-ink-soft: #5B3A22; --c-ink-mute: #9A7A5A; --c-line: #ECD9B0; --c-primary: #B8452A; --c-primary-ink: #FFFBEF; --c-accent: #9A7424; --c-accent-soft: #F0C97A; /* Radii, shadow */ --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --shadow-sm: 0 1px 2px rgba(30,20,10,.06), 0 2px 6px rgba(30,20,10,.04); --shadow-md: 0 2px 4px rgba(30,20,10,.06), 0 12px 28px rgba(30,20,10,.08); --shadow-lg: 0 4px 8px rgba(30,20,10,.08), 0 24px 60px rgba(30,20,10,.12); } /* Active palette mapped via data-palette on */ body[data-palette="A"] { --bg: var(--a-bg); --surface: var(--a-surface); --ink: var(--a-ink); --ink-soft: var(--a-ink-soft); --ink-mute: var(--a-ink-mute); --line: var(--a-line); --primary: var(--a-primary); --primary-ink: var(--a-primary-ink); --accent: var(--a-accent); --accent-soft: var(--a-accent-soft); } body[data-palette="B"] { --bg: var(--b-bg); --surface: var(--b-surface); --ink: var(--b-ink); --ink-soft: var(--b-ink-soft); --ink-mute: var(--b-ink-mute); --line: var(--b-line); --primary: var(--b-primary); --primary-ink: var(--b-primary-ink); --accent: var(--b-accent); --accent-soft: var(--b-accent-soft); } body[data-palette="C"] { --bg: var(--c-bg); --surface: var(--c-surface); --ink: var(--c-ink); --ink-soft: var(--c-ink-soft); --ink-mute: var(--c-ink-mute); --line: var(--c-line); --primary: var(--c-primary); --primary-ink: var(--c-primary-ink); --accent: var(--c-accent); --accent-soft: var(--c-accent-soft); } /* Dark mode (seară) — a warm reading mode */ body[data-mode="dark"] { --bg: #14110C; --surface: #1C1812; --ink: #F2E8D4; --ink-soft: #C8B998; --ink-mute: #8A7F6A; --line: #2E281E; --primary: #E6B04E; --primary-ink: #14110C; --accent: #C98A3A; --accent-soft: #7A5A24; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s ease, color .3s ease; } h1, h2, h3, h4 { font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; margin: 0; color: var(--ink); } h1 { font-size: clamp(40px, 5.2vw, 72px); font-weight: 500; } h2 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; } h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* ===== Navigation ===== */ .topbar { background: var(--primary); color: var(--primary-ink); font-size: 13px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { opacity: .85; } .topbar a:hover { opacity: 1; } .topbar .topbar-links { display: flex; gap: 18px; } .nav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--surface) 92%, transparent); } .nav .container { display: flex; align-items: center; gap: 40px; padding-top: 14px; padding-bottom: 14px; } .brand { display: flex; align-items: center; gap: 14px; cursor: pointer; } .brand img { width: 48px; height: 48px; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-text b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; font-weight: 600; letter-spacing: .01em; color: var(--ink); } .brand-text span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } .nav-links { display: flex; gap: 2px; margin-left: auto; align-items: center; } .nav-item { position: relative; } .nav-item > a { display: flex; align-items: center; gap: 4px; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--ink-soft); border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; } .nav-item > a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); } .nav-item > a.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); } .nav-item .caret { font-size: 9px; opacity: .6; transition: transform .2s; } .nav-item.has-sub:hover .caret { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 60; } .nav-item.has-sub:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { padding: 9px 14px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; transition: color .12s, background .12s; } .dropdown a:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); } .nav-cta { margin-left: 8px; white-space: nowrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: transform .15s, background .15s, color .15s; border: 1px solid transparent; } .btn-primary { background: var(--primary); color: var(--primary-ink); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 600; } /* ===== Footer ===== */ footer { background: var(--primary); color: var(--primary-ink); padding: 64px 0 32px; margin-top: 96px; } footer .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } footer h4 { color: var(--accent-soft); font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; font-weight: 600; margin-bottom: 16px; letter-spacing: .02em; } footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } footer ul a { opacity: .8; font-size: 14px; } footer ul a:hover { opacity: 1; } .footer-brand { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .footer-brand img { width: 64px; height: 64px; } .footer-brand b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; display: block; } .footer-brand span { font-size: 12px; opacity: .7; display: block; margin-top: 4px; letter-spacing: .1em; text-transform: uppercase; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; justify-content: space-between; font-size: 13px; opacity: .7; gap: 16px; flex-wrap: wrap; } /* ===== Placeholder boxes (fallback only) ===== */ .ph { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 8%, transparent) 0, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px, transparent 10px), color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink-mute); display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--r-md); } .ph-dark { background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 10px), color-mix(in srgb, var(--primary) 80%, #000); color: var(--accent-soft); border-color: rgba(255,255,255,.1); } /* ===== Section header (reused) ===== */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; padding-top: 96px; } .section-head .left { max-width: 640px; } .section-head h2 { margin-top: 12px; } .section-head .lead { color: var(--ink-soft); font-size: 17px; margin-top: 16px; max-width: 560px; } /* ===== Page transitions ===== */ .page { animation: fadeIn .3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Density */ body[data-density="compact"] { font-size: 15px; } body[data-density="compact"] .section-head { margin-bottom: 32px; padding-top: 64px; } body[data-density="compact"] footer { padding: 48px 0 24px; margin-top: 64px; } /* Responsive */ @media (max-width: 1180px) { .topbar .topbar-links { display: none; } .nav-links a { padding: 10px 10px; font-size: 13px; } .nav-links .btn { padding: 10px 16px !important; font-size: 13px; } } @media (max-width: 1024px) { .nav .container { flex-wrap: wrap; gap: 12px; } .nav-links { width: 100%; overflow-x: auto; margin-left: 0; padding-bottom: 2px; } .nav-links::-webkit-scrollbar { display: none; } .topbar { font-size: 12px; } footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .section-head { flex-direction: column; align-items: flex-start; gap: 16px; } }