/* ========================================================================== Student application page — shared layout bits + four swappable "skins" picked live via the header theme switcher (no reload, see theme-switch.js). Skins are pure CSS: they re-pin the design-system tokens from style.css under [data-theme="…"] on , the same trick the admin theme uses. ========================================================================== */ .student-page .form-shell { position: relative; } /* ========================================================================== Theme switcher — lives in the header, replaces the old "На главную" link (the logo already links home). Each button carries a small emblem so the choice reads at a glance even before the label is legible. ========================================================================== */ .theme-switcher { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); } .theme-btn { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 15px; border-radius: 999px; border: none; background: transparent; color: var(--ink-soft); font-family: var(--ff-head); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .theme-btn:hover { color: var(--ink); background: var(--cream-soft); } .theme-btn.is-active { background: var(--violet); color: #fff; } .theme-btn-emblem { font-size: 16px; line-height: 1; } @media (max-width: 880px) { .theme-btn-label { display: none; } .theme-btn { padding: 8px 11px; } } @media (max-width: 420px) { .theme-switcher { gap: 0; } .theme-btn { padding: 8px; min-width: 44px; justify-content: center; } } /* ========================================================================== Decorative stickers/stamps — markup always present, visibility toggled per active theme so switching is instant and CSS-only. Position/rotation live on the outer .deco-* element (static); the inner element handles the floaty bob animation — kept separate so the animation's own `transform` never clobbers the sticker's static rotation. ========================================================================== */ .deco { position: absolute; display: none; pointer-events: none; user-select: none; z-index: 3; } .deco-inner, .deco-img { display: block; animation: decoFloat 4.5s ease-in-out infinite; } @keyframes decoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (max-width: 900px) { .deco { display: none !important; } } /* Image slots for theme "67" — drop files at the paths below and they show up pre-positioned; missing files just fail silently (see onerror in the template), so the page looks clean even with none of them filled in yet. Recommended: transparent PNG, sticker/meme style, ~300–500px source. */ .deco-67 .deco-img { width: 76px; height: auto; filter: drop-shadow(3px 5px 0 rgba(27, 17, 48, 0.22)); } /* ========================================================================== Theme: "67" — maximalist, loud, a little unhinged (on purpose) ========================================================================== */ :root[data-theme="67"] { --cream: #FFF2A8; --cream-soft: #FFFFFF; --paper: #FFFFFF; --ink: #1B1130; --ink-soft: #3A2A5C; --ink-mute: #6E5A96; --violet: #7C3AED; --coral: #FF3D7F; --lime: #B6FF2E; --cyan: #22D3EE; --pink: #FF5FA0; --amber: #FFD23F; --line: rgba(27, 17, 48, 0.25); --line-strong: rgba(27, 17, 48, 0.9); --ink-shadow: #1B1130; --radius-md: 22px; --radius-lg: 26px; --ff-head: "Bungee", "Unbounded", sans-serif; --ff-body: "Baloo 2", "Inter", sans-serif; } :root[data-theme="67"] body { background: radial-gradient(circle at 8% 12%, rgba(124, 58, 237, 0.16), transparent 40%), radial-gradient(circle at 92% 18%, rgba(255, 61, 127, 0.16), transparent 42%), repeating-linear-gradient(135deg, rgba(27,17,48,0.05) 0 2px, transparent 2px 26px), var(--cream); } :root[data-theme="67"] .blob { opacity: 0.55 !important; filter: saturate(1.4); } :root[data-theme="67"] .form-head h1 { letter-spacing: -0.01em; } :root[data-theme="67"] .eyebrow { transform: rotate(-3deg); } :root[data-theme="67"] .form-card { border-width: 3px; box-shadow: 8px 8px 0 var(--coral), 8px 8px 0 2px var(--ink); } :root[data-theme="67"] .btn { border-width: 3px; } :root[data-theme="67"] .btn-primary:hover { transform: translate(-3px, -3px) rotate(-1.5deg); } :root[data-theme="67"] .chip label { border-width: 2.5px; font-weight: 700; } :root[data-theme="67"] .chip:nth-child(3n+1) label { transform: rotate(-1.4deg); } :root[data-theme="67"] .chip:nth-child(3n+2) label { transform: rotate(1.1deg); } :root[data-theme="67"] .chip input:checked + label { transform: scale(1.05) rotate(-2deg); } :root[data-theme="67"] .toggle-opt label { border-width: 2.5px; } :root[data-theme="67"] .progress-step .fill { background: linear-gradient(90deg, var(--violet), var(--coral)); } :root[data-theme="67"] .theme-btn.is-active { background: var(--coral); } :root[data-theme="67"] .deco-67 { display: block; } :root[data-theme="67"] .deco-67-a { top: -34px; left: -30px; } :root[data-theme="67"] .deco-67-b .deco-inner { font-family: var(--ff-head); font-size: 20px; color: var(--paper); background: var(--ink); padding: 8px 12px; border-radius: 12px; } :root[data-theme="67"] .deco-67-b { top: 18px; right: -46px; transform: rotate(8deg); } :root[data-theme="67"] .deco-67-c { top: 42%; left: -44px; transform: rotate(10deg); } :root[data-theme="67"] .deco-67-d { top: 38%; right: -40px; transform: rotate(-8deg); } :root[data-theme="67"] .deco-67-e { bottom: 60px; left: -50px; transform: rotate(-6deg); } :root[data-theme="67"] .deco-67-f { bottom: 40px; right: -36px; transform: rotate(9deg); } :root[data-theme="67"] .deco-67-g { bottom: -34px; left: 50%; margin-left: -84px; width: 168px; text-align: center; } :root[data-theme="67"] .deco-67-g .deco-inner { display: inline-block; transform: rotate(-2deg); font-family: var(--ff-head); font-size: 13px; font-weight: 700; color: var(--ink); background: var(--lime); padding: 7px 14px; border-radius: 999px; border: 2px solid var(--ink); white-space: nowrap; } /* ========================================================================== Theme: "opium" — black/off-white, distressed high-fashion streetwear (Enfants Riches Déprimés / Rick Owens / Vetements / If Six Was Nine mood) ========================================================================== */ :root[data-theme="opium"] { --cream: #000000; --cream-soft: #131313; --paper: #0A0A0A; --ink: #F2EEE4; --ink-soft: #B9B2A2; --ink-mute: #726B5C; --violet: #F2EEE4; --coral: #C6001C; --lime: #F2EEE4; --cyan: #F2EEE4; --pink: #C6001C; --amber: #F2EEE4; --line: rgba(242, 238, 228, 0.2); --line-strong: rgba(242, 238, 228, 0.85); --ink-shadow: rgba(242, 238, 228, 0.85); --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --ff-head: "Bebas Neue", "Unbounded", sans-serif; --ff-body: "EB Garamond", "Inter", serif; } :root[data-theme="opium"] body { background: var(--cream); } :root[data-theme="opium"] .site-header.scrolled { background: rgba(0, 0, 0, 0.86); border-bottom-color: var(--ink); } :root[data-theme="opium"] .grain { opacity: 0.16; mix-blend-mode: screen; } :root[data-theme="opium"] .blob { opacity: 0.05 !important; filter: grayscale(1) blur(60px); } :root[data-theme="opium"] .cursor-dot { background: var(--ink); } :root[data-theme="opium"] .cursor-ring { border-color: var(--ink); } :root[data-theme="opium"] ::selection { background: var(--ink); color: #000; } :root[data-theme="opium"] .btn, :root[data-theme="opium"] .chip label, :root[data-theme="opium"] .toggle-opt label, :root[data-theme="opium"] .input, :root[data-theme="opium"] .select, :root[data-theme="opium"] textarea.input, :root[data-theme="opium"] .progress-step, :root[data-theme="opium"] .progress-step .fill, :root[data-theme="opium"] .panel, :root[data-theme="opium"] .eyebrow, :root[data-theme="opium"] .check-circle, :root[data-theme="opium"] .theme-switcher, :root[data-theme="opium"] .theme-btn { border-radius: 0; } :root[data-theme="opium"] .form-head h1, :root[data-theme="opium"] .field label.field-label, :root[data-theme="opium"] .btn, :root[data-theme="opium"] .toggle-opt label strong, :root[data-theme="opium"] .theme-btn { text-transform: uppercase; letter-spacing: 0.06em; } :root[data-theme="opium"] .form-head h1 { letter-spacing: 0.02em; font-weight: 400; } :root[data-theme="opium"] .form-head p { font-style: italic; } :root[data-theme="opium"] .eyebrow { color: #000; font-weight: 700; } :root[data-theme="opium"] .eyebrow::before { background: var(--coral); } :root[data-theme="opium"] .form-card { border-width: 1px; } :root[data-theme="opium"] .input, :root[data-theme="opium"] .select, :root[data-theme="opium"] textarea.input { border-width: 1px; } :root[data-theme="opium"] .input:focus, :root[data-theme="opium"] .select:focus, :root[data-theme="opium"] textarea.input:focus { border-color: var(--ink); background: #000; } :root[data-theme="opium"] .chip label, :root[data-theme="opium"] .toggle-opt label { border-width: 1px; font-size: 13px; letter-spacing: 0.03em; } :root[data-theme="opium"] .chip input:checked + label { color: #000; } :root[data-theme="opium"] .btn-primary { color: #000; } :root[data-theme="opium"] .theme-btn.is-active { color: #000; } :root[data-theme="opium"] .btn-primary:hover { background: #fff; box-shadow: 10px 10px 0 var(--ink-shadow); } :root[data-theme="opium"] .btn-ghost:hover { background: #161616; } :root[data-theme="opium"] select.input { background-image: url("data:image/svg+xml;utf8,"); } :root[data-theme="opium"] .form-error-list { background: #1a0000; border-color: var(--coral); color: #ff8f8f; border-radius: 0; } :root[data-theme="opium"] .deco-opium { display: block; font-family: var(--ff-head); color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; } :root[data-theme="opium"] .deco-opium-a { top: -30px; right: 0; font-size: 12px; border: 1px solid var(--line-strong); padding: 5px 10px; } :root[data-theme="opium"] .deco-opium-b { top: 60px; left: -34px; font-size: 11px; writing-mode: vertical-rl; letter-spacing: 0.22em; color: var(--ink-mute); } :root[data-theme="opium"] .deco-opium-c { top: -18px; left: -8px; font-family: "UnifrakturMaguntia", cursive; font-size: 64px; color: rgba(242, 238, 228, 0.06); text-transform: none; letter-spacing: 0; z-index: 1; } :root[data-theme="opium"] .deco-opium-d { bottom: -14px; right: 6px; font-size: 11px; transform: rotate(-6deg); border: 1px solid var(--line-strong); padding: 5px 10px; background: #000; } @media (max-width: 1180px) { :root[data-theme="opium"] .deco-opium-b, :root[data-theme="opium"] .deco-opium-c { display: none; } } /* ========================================================================== Theme: "hellokitty" — pastel, bubbly, bows-and-hearts cute (original decorative motifs only — no Sanrio character art or trademarks used) ========================================================================== */ :root[data-theme="hellokitty"] { --cream: #FFF3F7; --cream-soft: #FFE6EF; --paper: #FFFFFF; --ink: #5B2A3B; --ink-soft: #8C5A6C; --ink-mute: #B98CA0; --violet: #FF6FA0; --coral: #FF4D6D; --lime: #FFD3E2; --cyan: #FFB3C6; --pink: #FF8FB3; --amber: #FFC2D6; --line: rgba(91, 42, 59, 0.16); --line-strong: rgba(91, 42, 59, 0.75); --ink-shadow: rgba(255, 111, 160, 0.5); --radius-md: 26px; --radius-lg: 34px; --ff-head: "Fredoka", "Unbounded", sans-serif; --ff-body: "Nunito", "Inter", sans-serif; } :root[data-theme="hellokitty"] body { background: radial-gradient(circle, rgba(255, 143, 179, 0.35) 2px, transparent 2.5px) 0 0/26px 26px, radial-gradient(circle at 12% 8%, rgba(255, 179, 198, 0.5), transparent 42%), radial-gradient(circle at 88% 14%, rgba(255, 211, 226, 0.6), transparent 44%), var(--cream); } :root[data-theme="hellokitty"] .blob { opacity: 0.5 !important; filter: saturate(0.9) hue-rotate(-10deg); } :root[data-theme="hellokitty"] .form-head h1 { letter-spacing: -0.005em; } :root[data-theme="hellokitty"] .eyebrow { transform: rotate(-2deg); color: var(--ink); } :root[data-theme="hellokitty"] .eyebrow::before { background: var(--coral); } :root[data-theme="hellokitty"] .form-card { border-width: 2px; box-shadow: 7px 7px 0 var(--pink), 7px 7px 0 2px var(--ink); } :root[data-theme="hellokitty"] .btn-primary { color: var(--ink); } :root[data-theme="hellokitty"] .btn-primary:hover { background: #ff87ac; } :root[data-theme="hellokitty"] .chip label { font-weight: 700; } :root[data-theme="hellokitty"] .chip input:checked + label { color: var(--ink); } :root[data-theme="hellokitty"] .toggle-opt label { border-radius: 20px; } :root[data-theme="hellokitty"] .input, :root[data-theme="hellokitty"] .select, :root[data-theme="hellokitty"] textarea.input { border-radius: 18px; } :root[data-theme="hellokitty"] .progress-step .fill { background: linear-gradient(90deg, var(--violet), var(--coral)); } :root[data-theme="hellokitty"] .theme-btn.is-active { background: var(--violet); color: var(--ink); } :root[data-theme="hellokitty"] .deco-kitty { display: block; font-size: 30px; } :root[data-theme="hellokitty"] .deco-kitty-a { top: -18px; left: -36px; transform: rotate(-14deg); } :root[data-theme="hellokitty"] .deco-kitty-b { top: 30%; right: -38px; transform: rotate(10deg); } :root[data-theme="hellokitty"] .deco-kitty-c { bottom: 70px; left: -46px; transform: rotate(-8deg); } :root[data-theme="hellokitty"] .deco-kitty-d { top: -10px; right: -30px; font-size: 24px; transform: rotate(12deg); } :root[data-theme="hellokitty"] .deco-kitty-e { bottom: 30px; right: -40px; transform: rotate(-6deg); } :root[data-theme="hellokitty"] .deco-kitty-f { bottom: -30px; left: 50%; margin-left: -92px; width: 184px; text-align: center; font-size: 12.5px; } :root[data-theme="hellokitty"] .deco-kitty-f .deco-inner { display: inline-block; transform: rotate(2deg); font-family: var(--ff-head); font-weight: 600; color: var(--ink); background: var(--paper); padding: 7px 14px; border-radius: 999px; border: 2px solid var(--ink); white-space: nowrap; }