/*! * ÖDP Workspace Glow — Gen-Z 2026 / 3D Pillow edition * * A drop-in design overhaul for the YKS / LGS workspace pages. * Transforms the existing light layout into a soft-3D, pillowy * Gen-Z aesthetic: chunky rounded cards, gradient icon tiles, * spring micro-motion, neon accents. * * Loaded last in so it overrides base styles cleanly. * * © ÖDP 2026 */ /* ───────────────────────────────────────────────────────────── 0. Design tokens ───────────────────────────────────────────────────────────── */ :root { /* Surfaces */ --owg-canvas: #eef0f7; --owg-canvas-2: #e3e7f1; --owg-pillow: #ffffff; --owg-pillow-soft: #f7f8fc; --owg-pillow-tint: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%); --owg-stroke: rgba(15, 23, 42, .06); --owg-stroke-2: rgba(15, 23, 42, .1); /* Ink */ --owg-ink: #0f172a; --owg-ink-soft: #475569; --owg-ink-mute: #64748b; /* Brand palette */ --owg-violet: #8b5cf6; --owg-violet-2:#7c3aed; --owg-cyan: #06b6d4; --owg-pink: #ec4899; --owg-orange: #f97316; --owg-lime: #84cc16; --owg-yellow: #facc15; --owg-mint: #2dd4bf; --owg-red: #ef4444; /* Gradients */ --owg-grad-1: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%); /* violet → cyan */ --owg-grad-2: linear-gradient(135deg, #ec4899 0%, #f97316 100%); /* pink → orange */ --owg-grad-3: linear-gradient(135deg, #06b6d4 0%, #84cc16 100%); /* cyan → lime */ --owg-grad-4: linear-gradient(135deg, #facc15 0%, #ec4899 100%); /* sun → pink */ --owg-grad-fire: linear-gradient(135deg, #ef4444 0%, #f97316 60%, #facc15 100%); --owg-grad-mint: linear-gradient(135deg, #2dd4bf 0%, #06b6d4 100%); --owg-grad-night:linear-gradient(180deg, #1f1f2c 0%, #0f1018 100%); /* Pillow shadows (multi-layer for depth) */ --owg-pillow-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 -2px 0 rgba(15, 23, 42, .03) inset, 0 4px 12px rgba(15, 23, 42, .05), 0 18px 36px rgba(15, 23, 42, .08), 0 44px 80px rgba(15, 23, 42, .07); --owg-pillow-shadow-hover: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 -2px 0 rgba(15, 23, 42, .04) inset, 0 8px 18px rgba(15, 23, 42, .07), 0 28px 54px rgba(15, 23, 42, .12), 0 60px 110px rgba(139, 92, 246, .14); --owg-icon-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 -1px 0 rgba(0, 0, 0, .12) inset, 0 8px 18px rgba(15, 23, 42, .14); /* Motion */ --owg-spring: cubic-bezier(.34, 1.56, .55, 1); --owg-ease: cubic-bezier(.32, .94, .42, 1.04); --owg-tilt: perspective(900px) rotateX(2deg); --owg-tilt-hov: perspective(900px) rotateX(-2deg) translateY(-4px); } /* ───────────────────────────────────────────────────────────── 1. Body canvas — soft cream + radial mesh gradient ───────────────────────────────────────────────────────────── */ body[data-content-page="true"] { background: radial-gradient(ellipse 80% 60% at 12% 0%, rgba(139, 92, 246, .14), transparent 55%), radial-gradient(ellipse 70% 50% at 88% 18%, rgba(6, 182, 212, .12), transparent 55%), radial-gradient(ellipse 60% 50% at 50% 110%, rgba(236, 72, 153, .10), transparent 60%), var(--owg-canvas) !important; color: var(--owg-ink) !important; font-family: 'Sora', 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important; background-attachment: fixed !important; } body[data-content-page="true"] .container { position: relative; z-index: 1; } /* Tiny dot field overlay for added depth */ body[data-content-page="true"]::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(rgba(15, 23, 42, .06) 1px, transparent 1px); background-size: 22px 22px; background-position: 0 0; pointer-events: none; z-index: 0; opacity: .4; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%); } /* ───────────────────────────────────────────────────────────── 2. Header — bold gradient title ───────────────────────────────────────────────────────────── */ body[data-content-page="true"] .header h1 { font-weight: 900 !important; letter-spacing: -.045em !important; background: linear-gradient(135deg, #0f172a 0%, #4c1d95 50%, #0e7490 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none !important; } body[data-content-page="true"] .header { position: relative; padding-top: 12px; } /* ───────────────────────────────────────────────────────────── 3. Universal pillow base Applied to: surface-link-panel, countdown-container, subject-grid items, summary-grid items, seo-link-card, faq-visible-item, modal panels ───────────────────────────────────────────────────────────── */ .surface-link-panel, .countdown-container, .summary-section, .seo-section, .subject-grid > div, .subject-grid > article, .summary-grid > div, .summary-grid > article, .seo-link-card, .faq-visible-item, .controls, .main-tabs, .calc-card, .reset-card, .dist-modal-content, .review-modal-content { position: relative; background: var(--owg-pillow-tint) !important; border-radius: 26px !important; border: 1px solid var(--owg-stroke) !important; box-shadow: var(--owg-pillow-shadow) !important; transform: var(--owg-tilt); transform-origin: center top; transition: transform 460ms var(--owg-spring), box-shadow 460ms var(--owg-ease), border-color 280ms ease !important; isolation: isolate; } .subject-grid > div:hover, .subject-grid > article:hover, .summary-grid > div:hover, .summary-grid > article:hover, .seo-link-card:hover, .surface-link-panel:hover, .faq-visible-item:hover { transform: var(--owg-tilt-hov); box-shadow: var(--owg-pillow-shadow-hover) !important; border-color: rgba(139, 92, 246, .22) !important; } /* Top inner highlight strip */ .subject-grid > div::before, .subject-grid > article::before, .summary-grid > div::before, .surface-link-panel::before, .seo-link-card::before, .faq-visible-item::before { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), transparent); border-radius: 2px; pointer-events: none; z-index: 2; } /* ───────────────────────────────────────────────────────────── 4. Header gradient strip (left-edge accent) Adds the "track-color" identity bar to subject + link cards ───────────────────────────────────────────────────────────── */ .subject-grid > div, .subject-grid > article, .surface-link-panel, .seo-link-card { /* Keep overflow visible so header/status badges are never clipped */ overflow: visible; } .subject-grid > div::after, .subject-grid > article::after, .surface-link-panel::after, .seo-link-card::after { content: ''; position: absolute; top: 14px; bottom: 14px; left: 0; width: 5px; border-radius: 0 6px 6px 0; background: var(--owg-grad-1); box-shadow: 0 0 14px rgba(139, 92, 246, .42); pointer-events: none; z-index: 2; } .subject-grid > div:nth-child(2n)::after, .subject-grid > article:nth-child(2n)::after { background: var(--owg-grad-2); box-shadow: 0 0 14px rgba(236, 72, 153, .42); } .subject-grid > div:nth-child(3n)::after, .subject-grid > article:nth-child(3n)::after { background: var(--owg-grad-3); box-shadow: 0 0 14px rgba(6, 182, 212, .42); } .subject-grid > div:nth-child(4n)::after, .subject-grid > article:nth-child(4n)::after { background: var(--owg-grad-4); box-shadow: 0 0 14px rgba(250, 204, 21, .42); } .subject-grid > div:nth-child(5n)::after, .subject-grid > article:nth-child(5n)::after { background: var(--owg-grad-mint); box-shadow: 0 0 14px rgba(45, 212, 191, .42); } .subject-grid > div:nth-child(6n)::after, .subject-grid > article:nth-child(6n)::after { background: var(--owg-grad-fire); box-shadow: 0 0 14px rgba(239, 68, 68, .42); } .surface-link-panel--distribution::after { background: var(--owg-grad-2) !important; box-shadow: 0 0 14px rgba(236, 72, 153, .42) !important; } .surface-link-panel--calculator::after { background: var(--owg-grad-1) !important; } .surface-link-panel--taban::after { background: var(--owg-grad-3) !important; box-shadow: 0 0 14px rgba(6, 182, 212, .42) !important; } .surface-link-panel--ranking::after { background: var(--owg-grad-4) !important; box-shadow: 0 0 14px rgba(250, 204, 21, .42) !important; } /* ───────────────────────────────────────────────────────────── 5. Subject card interior ───────────────────────────────────────────────────────────── */ .subject-grid > div, .subject-grid > article { padding: 22px 22px 18px !important; } .subject-header { position: relative; padding-left: 4px; padding-top: 6px; padding-bottom: 2px; } .subject-title { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 14px !important; } .subject-title-text { display: inline-flex !important; align-items: center !important; gap: 12px !important; font-weight: 900 !important; letter-spacing: -.025em !important; font-size: 17px !important; color: var(--owg-ink) !important; } /* Big rounded gradient "icon tile" attached to subject title (the leading emoji) */ .subject-title-text::first-letter { display: inline-block; width: 40px; height: 40px; margin-right: 6px; border-radius: 14px; background: var(--owg-grad-1); color: #fff; text-align: center; line-height: 40px; font-size: 22px; vertical-align: middle; box-shadow: var(--owg-icon-shadow); } .subject-controls { display: flex !important; align-items: center !important; gap: 8px !important; background: var(--owg-pillow) !important; border: 1px solid var(--owg-stroke-2) !important; border-radius: 14px !important; padding: 6px 10px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(15, 23, 42, .03), 0 4px 10px rgba(15, 23, 42, .04) !important; } .subject-controls label { font-weight: 700 !important; font-size: 11.5px !important; letter-spacing: .04em; text-transform: uppercase; color: var(--owg-ink-mute) !important; } .subject-days-input { width: 64px !important; border: 0 !important; background: transparent !important; font-weight: 800 !important; font-size: 14px !important; text-align: center !important; color: var(--owg-ink) !important; outline: none !important; } .clear-override { border-radius: 999px !important; padding: 4px 10px !important; border: 0 !important; background: rgba(139, 92, 246, .1) !important; color: var(--owg-violet-2) !important; font-weight: 800 !important; font-size: 11px !important; cursor: pointer; letter-spacing: -.005em; } .subject-stats { display: flex !important; gap: 12px !important; margin: 12px 0 !important; flex-wrap: wrap; } .subject-stats .stat, .stat { flex: 1 1 0; min-width: 92px; background: var(--owg-pillow) !important; border: 1px solid var(--owg-stroke) !important; border-radius: 16px !important; padding: 12px 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(15, 23, 42, .05) !important; display: flex !important; flex-direction: column; gap: 2px; } .stat-value { background: var(--owg-grad-1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900 !important; letter-spacing: -.05em !important; font-size: clamp(22px, 3vw, 28px) !important; line-height: 1 !important; } .subject-grid > div:nth-child(2n) .stat-value, .summary-grid > div:nth-child(2n) .stat-value { background: var(--owg-grad-2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .subject-grid > div:nth-child(3n) .stat-value, .summary-grid > div:nth-child(3n) .stat-value { background: var(--owg-grad-3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .subject-grid > div:nth-child(4n) .stat-value, .summary-grid > div:nth-child(4n) .stat-value { background: var(--owg-grad-4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-label { font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--owg-ink-mute) !important; font-size: 10.5px !important; } /* ───────────────────────────────────────────────────────────── 6. Topic list — pillow rows ───────────────────────────────────────────────────────────── */ .topic-list { display: flex !important; flex-direction: column; gap: 8px !important; margin-top: 12px !important; padding-right: 6px !important; scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .46) rgba(226, 232, 240, .55); } .topic-list::-webkit-scrollbar { width: 10px; } .topic-list::-webkit-scrollbar-track { margin: 10px 0; border-radius: 999px; background: rgba(226, 232, 240, .5); } .topic-list::-webkit-scrollbar-thumb { min-height: 44px; border: 3px solid transparent; border-radius: 999px; background: linear-gradient(180deg, rgba(100, 116, 139, .64), rgba(71, 85, 105, .58)) border-box; background-clip: padding-box; } .topic-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(71, 85, 105, .72), rgba(51, 65, 85, .68)) border-box; background-clip: padding-box; } .topic-list::-webkit-scrollbar-button { width: 0 !important; height: 0 !important; display: none !important; } /* * Topic-item lives in two layout modes in the wild: * • YKS index uses display:flex, row direction (toggle | stats) * • LGS index uses display:grid with grid-template-rows: 42px 24px (toggle / stats) * * Our visual styling layers on top of both. The CRITICAL FIXES below ensure * that no matter the layout, content height auto-grows when chips wrap so * action pills and badges never overflow into adjacent rows. */ .topic-item { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(118px, max-content) !important; align-items: center !important; gap: 10px !important; /* Visual surface */ background: var(--owg-pillow) !important; border: 1px solid var(--owg-stroke) !important; border-bottom: 1px solid var(--owg-stroke) !important; border-left: 3px solid transparent !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 10px rgba(15, 23, 42, .04) !important; transition: transform 240ms var(--owg-spring), border-color 240ms ease, box-shadow 240ms ease !important; overflow: hidden !important; height: auto !important; min-height: 74px !important; padding: 12px 14px !important; } .topic-item .topic-main-toggle { grid-column: 1 !important; width: 100% !important; min-width: 0 !important; align-self: stretch !important; flex: 0 0 auto !important; } .topic-item .topic-stats { grid-column: 2 !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; align-self: center !important; flex: 0 0 auto !important; justify-content: flex-end !important; row-gap: 6px !important; column-gap: 7px !important; height: auto !important; overflow: visible !important; } .topic-item:hover { transform: translateY(-1px); border-color: rgba(139, 92, 246, .25) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 22px rgba(139, 92, 246, .12) !important; } .topic-item.completed { background: linear-gradient(180deg, rgba(45, 212, 191, .08), rgba(132, 204, 22, .06)), var(--owg-pillow) !important; border-color: rgba(45, 212, 191, .35) !important; } /* Keep linked topic rows inside their card; never create a sideways scrollbar. */ body[data-odp-linked="1"] .topic-list { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: clip !important; padding-left: 0 !important; padding-right: 10px !important; } @supports not (overflow: clip) { body[data-odp-linked="1"] .topic-list { overflow-x: hidden !important; } } body[data-odp-linked="1"] .topic-list * { box-sizing: border-box !important; } body[data-odp-linked="1"] .topic-item { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(118px, max-content) !important; align-items: center !important; gap: 10px !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 74px !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding: 12px 14px !important; overflow: hidden !important; } body[data-odp-linked="1"] .topic-item .topic-main-toggle { grid-column: 1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; align-self: center !important; flex: initial !important; } body[data-odp-linked="1"] .topic-item .topic-name { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } body[data-odp-linked="1"] .topic-item .topic-stats { grid-column: 2 !important; justify-self: stretch !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; flex: initial !important; justify-content: flex-end !important; align-content: center !important; overflow: visible !important; } body[data-odp-linked="1"] .topic-item .badge, body[data-odp-linked="1"] .topic-item .topic-review-badge, body[data-odp-linked="1"] .topic-item .topic-review-action, body[data-odp-linked="1"] .topic-item .stage-track, body[data-odp-linked="1"] .topic-item .topic-completion-age { max-width: 100% !important; } body[data-odp-linked="1"] .topic-item.completed { grid-template-columns: 38px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: stretch !important; gap: 10px 12px !important; min-height: 132px !important; padding: 18px 16px !important; overflow: hidden !important; } body[data-odp-linked="1"] .topic-item.completed .topic-main-toggle { display: contents !important; } body[data-odp-linked="1"] .topic-item.completed .topic-stats { grid-column: 2 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "age stage" "review avg" !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: stretch !important; row-gap: 8px !important; column-gap: 8px !important; padding-left: 0 !important; } body[data-odp-linked="1"] .topic-item.completed .stage-track { grid-area: stage !important; justify-self: end !important; align-self: center !important; flex: initial !important; min-width: 0 !important; justify-content: flex-end !important; flex-wrap: wrap !important; white-space: normal !important; row-gap: 3px !important; } body[data-odp-linked="1"] .topic-item.completed .completion-btn { grid-column: 1 !important; grid-row: 1 / 3 !important; align-self: start !important; justify-self: center !important; width: 30px !important; height: 30px !important; margin: 4px 0 0 !important; } body[data-odp-linked="1"] .topic-item.completed .topic-name { grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; padding-top: 2px !important; font-size: 15px !important; line-height: 1.35 !important; } body[data-odp-linked="1"] .topic-item.completed .topic-completion-age { grid-area: age !important; justify-self: start !important; align-self: center !important; } body[data-odp-linked="1"] .topic-item.completed .topic-review-action { grid-area: review !important; justify-self: end !important; align-self: center !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; z-index: 4 !important; } body[data-odp-linked="1"] .topic-item.completed .badge { grid-area: avg !important; justify-self: end !important; align-self: center !important; } body[data-odp-linked="1"] .topic-item.completed .stage-next, body[data-odp-linked="1"] .topic-item.completed .topic-review-action, body[data-odp-linked="1"] .topic-item.completed .badge, body[data-odp-linked="1"] .topic-item.completed .topic-completion-age { flex: 0 1 auto !important; min-width: 0 !important; white-space: nowrap !important; } @media (max-width: 560px) { body[data-odp-linked="1"] .topic-item { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } body[data-odp-linked="1"] .topic-item .topic-stats { grid-column: 1 !important; width: 100% !important; justify-content: flex-start !important; padding-left: 40px !important; } body[data-odp-linked="1"] .topic-item.completed { grid-template-columns: 36px minmax(0, 1fr) !important; min-height: 136px !important; } body[data-odp-linked="1"] .topic-item.completed .topic-name { grid-column: 2 !important; } body[data-odp-linked="1"] .topic-item.completed .topic-stats { grid-column: 2 !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "age stage" "review avg" !important; padding-left: 0 !important; } body[data-odp-linked="1"] .topic-item.completed .stage-track { grid-area: stage !important; } body[data-odp-linked="1"] .topic-item.completed .topic-completion-age { grid-area: age !important; } body[data-odp-linked="1"] .topic-item.completed .topic-review-action { grid-area: review !important; } body[data-odp-linked="1"] .topic-item.completed .badge { grid-area: avg !important; } } /* ───────────────────────────────────────────────────────────── 7. Buttons — pillow + soft-brutalist offset shadow ───────────────────────────────────────────────────────────── */ .btn, button.btn, a.btn { border-radius: 14px !important; font-weight: 800 !important; letter-spacing: -.005em !important; padding: 10px 18px !important; border: 0; cursor: pointer; transition: transform 220ms var(--owg-spring), box-shadow 220ms ease, border-color 220ms ease !important; } .btn-outline, button.btn-outline, a.btn-outline { background: var(--owg-pillow) !important; border: 1px solid var(--owg-stroke-2) !important; color: var(--owg-violet-2) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(15, 23, 42, .03), 0 6px 14px rgba(15, 23, 42, .06) !important; font-weight: 800 !important; } .btn-outline:hover, .btn-outline:focus-visible { transform: translateY(-2px); border-color: rgba(139, 92, 246, .55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 24px rgba(139, 92, 246, .22) !important; outline: none; } .btn-primary, button.btn-primary, a.btn-primary { background: var(--owg-grad-1) !important; color: #fff !important; box-shadow: 0 4px 0 rgba(76, 29, 149, .35), 0 16px 32px rgba(139, 92, 246, .35) !important; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(76, 29, 149, .35), 0 22px 40px rgba(139, 92, 246, .42) !important; } .btn-primary:active, .btn-outline:active { transform: translateY(2px); transition-duration: 120ms; } /* ───────────────────────────────────────────────────────────── 8. Surface-link panels — quick-action row (the big chunky pillow rows above the subject grid) ───────────────────────────────────────────────────────────── */ .surface-link-stack { display: flex !important; flex-direction: column; gap: 14px !important; margin: 22px 0 !important; } .surface-link-panel { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; padding: 18px 22px !important; flex-wrap: wrap; } .surface-link-copy { flex: 1 1 280px; min-width: 0; } .surface-link-title { font-weight: 900 !important; letter-spacing: -.025em !important; font-size: 18px !important; color: var(--owg-ink) !important; margin: 0 !important; } .surface-link-actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap; } .surface-link-action { position: relative; display: inline-flex !important; align-items: center !important; justify-content: center; height: 42px; padding: 0 18px !important; border-radius: 999px !important; font-weight: 800 !important; letter-spacing: -.005em !important; font-size: 13.5px !important; text-decoration: none; cursor: pointer; border: 0; transition: transform 220ms var(--owg-spring), box-shadow 220ms ease !important; } .surface-link-action--primary, .surface-link-action--distribution { background: var(--owg-grad-2) !important; color: #fff !important; box-shadow: 0 4px 0 rgba(157, 23, 77, .25), 0 14px 28px rgba(236, 72, 153, .35) !important; } .surface-link-action--secondary { background: var(--owg-pillow) !important; color: var(--owg-violet-2) !important; border: 1px solid var(--owg-stroke-2) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(15, 23, 42, .06) !important; } .surface-link-action:hover { transform: translateY(-2px) scale(1.01); } .surface-link-action--primary:hover, .surface-link-action--distribution:hover { box-shadow: 0 6px 0 rgba(157, 23, 77, .25), 0 20px 36px rgba(236, 72, 153, .48) !important; } .surface-link-action--secondary:hover { border-color: rgba(139, 92, 246, .55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px rgba(139, 92, 246, .22) !important; } /* ───────────────────────────────────────────────────────────── 9. Distribution CTA group ───────────────────────────────────────────────────────────── */ .distribution-cta-group { display: inline-flex; align-items: center; } .distribution-cta-button { display: inline-flex !important; align-items: center !important; gap: 12px !important; background: var(--owg-grad-2) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-weight: 800 !important; letter-spacing: -.005em !important; padding: 12px 20px !important; font-size: 14px !important; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 4px 0 rgba(157, 23, 77, .25), 0 22px 44px rgba(236, 72, 153, .35) !important; transition: transform 240ms var(--owg-spring), box-shadow 240ms ease !important; } .distribution-cta-button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); background-size: 220% 100%; background-position: 100% 0; transition: background-position 720ms var(--owg-ease); pointer-events: none; } .distribution-cta-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 0 rgba(157, 23, 77, .25), 0 28px 52px rgba(236, 72, 153, .48) !important; } .distribution-cta-button:hover::before { background-position: 0% 0; } .distribution-cta-icon { width: 28px; height: 28px; border-radius: 10px; background: rgba(255, 255, 255, .22); display: inline-grid; place-items: center; font-size: 16px; box-shadow: var(--owg-icon-shadow); } .distribution-cta-lead { display: inline-flex; align-items: center; gap: 12px; font-weight: 800 !important; } .distribution-cta-badge { background: rgba(255, 255, 255, .22) !important; border: 1px solid rgba(255, 255, 255, .28) !important; color: #fff !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase; font-size: 11px !important; padding: 5px 12px !important; border-radius: 999px !important; } /* ───────────────────────────────────────────────────────────── 10. Global review button — bell with neon halo ───────────────────────────────────────────────────────────── */ .global-review-button { display: inline-flex !important; align-items: center !important; gap: 10px !important; background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(6, 182, 212, .14)) !important; color: var(--owg-violet-2) !important; border: 1px solid rgba(139, 92, 246, .35) !important; border-radius: 999px !important; padding: 10px 16px !important; font-weight: 800 !important; letter-spacing: -.005em !important; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 22px rgba(139, 92, 246, .14) !important; transition: transform 220ms var(--owg-spring), box-shadow 220ms ease, border-color 220ms ease !important; } .global-review-button:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, .65) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 30px rgba(139, 92, 246, .32) !important; } .global-review-icon { filter: drop-shadow(0 2px 6px rgba(139, 92, 246, .5)); } .global-review-count { background: var(--owg-grad-1) !important; color: #fff !important; font-weight: 900 !important; border: 0 !important; border-radius: 999px !important; padding: 2px 10px !important; box-shadow: 0 4px 12px rgba(139, 92, 246, .42) !important; } .global-review-button[data-tone="is-danger"] { border-color: rgba(239, 68, 68, .55) !important; background: linear-gradient(135deg, rgba(239, 68, 68, .14), rgba(249, 115, 22, .14)) !important; color: #991b1b !important; } .global-review-button[data-tone="is-danger"] .global-review-count { background: var(--owg-grad-fire) !important; animation: owg-pulse 2s ease-in-out infinite; } .global-review-button[data-tone="is-warning"] { border-color: rgba(250, 204, 21, .65) !important; background: linear-gradient(135deg, rgba(250, 204, 21, .18), rgba(249, 115, 22, .14)) !important; color: #854d0e !important; } .global-review-button[data-tone="is-warning"] .global-review-count { background: var(--owg-grad-4) !important; } @keyframes owg-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); } 50% { box-shadow: 0 0 22px rgba(239, 68, 68, .6); } } /* ───────────────────────────────────────────────────────────── 11. Countdown banner — chunky 3D pillow with neon timer ───────────────────────────────────────────────────────────── */ .countdowns-wrapper { display: grid !important; gap: 16px !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; margin: 22px 0 !important; } .countdown-container { padding: 22px 26px !important; background: radial-gradient(circle at 12% 0%, rgba(139, 92, 246, .12), transparent 60%), radial-gradient(circle at 88% 100%, rgba(6, 182, 212, .12), transparent 60%), var(--owg-grad-night) !important; border-color: rgba(139, 92, 246, .22) !important; color: #fff !important; overflow: hidden; } .countdown-container::before { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); border-radius: 2px; } .countdown-title { font-weight: 900 !important; letter-spacing: -.025em !important; font-size: 16px !important; background: var(--owg-grad-1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px !important; } .countdown-timer { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap; } .countdown-item { display: flex !important; flex-direction: column; align-items: center; gap: 2px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 10px 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .25); min-width: 64px; } .countdown-number { background: linear-gradient(180deg, #ffffff 0%, #c7d2fe 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900 !important; font-size: 28px !important; letter-spacing: -.04em !important; line-height: 1 !important; text-shadow: 0 6px 20px rgba(139, 92, 246, .35); } .countdown-label { color: rgba(255, 255, 255, .55) !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase; font-size: 10px !important; } .countdown-sep { color: rgba(139, 92, 246, .85) !important; font-weight: 900; filter: drop-shadow(0 0 6px rgba(139, 92, 246, .55)); } /* ───────────────────────────────────────────────────────────── 12. Controls (search + sort + day inputs) ───────────────────────────────────────────────────────────── */ .controls { padding: 18px !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 14px !important; margin: 22px 0 !important; } .control-group { display: flex !important; flex-direction: column; gap: 6px !important; min-width: 180px; } .control-label { font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--owg-ink-mute) !important; font-size: 10.5px !important; } .control-input { background: var(--owg-pillow) !important; border: 1px solid var(--owg-stroke-2) !important; border-radius: 14px !important; padding: 11px 14px !important; font-weight: 700 !important; font-family: inherit !important; font-size: 14px !important; color: var(--owg-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(15, 23, 42, .03), 0 4px 10px rgba(15, 23, 42, .04) !important; transition: border-color 200ms ease, box-shadow 200ms ease !important; } .control-input:focus, .control-input:focus-visible, .subject-days-input:focus, .subject-days-input:focus-visible { outline: none !important; border-color: rgba(139, 92, 246, .55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 4px rgba(139, 92, 246, .14) !important; } /* ───────────────────────────────────────────────────────────── 13. Main tabs (YKS sections / LGS Sayısal-Sözel) ───────────────────────────────────────────────────────────── */ .main-tabs { display: flex !important; gap: 6px !important; padding: 6px !important; margin: 22px 0 !important; border-radius: 999px !important; } .main-tab, .section-toggle, .sub-tab { flex: 1 1 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 18px !important; border-radius: 999px !important; font-weight: 800 !important; letter-spacing: -.005em !important; color: var(--owg-ink-mute) !important; cursor: pointer; transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease !important; } .main-tab.active, .section-toggle.active, .sub-tab.active, [data-section-tab].active, [role="tab"][aria-selected="true"] { background: var(--owg-grad-1) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(139, 92, 246, .35) !important; } .main-tab:not(.active):hover { color: var(--owg-violet-2) !important; background: rgba(139, 92, 246, .08) !important; } /* ───────────────────────────────────────────────────────────── 14. Topic / subject review buttons — tone-coded pills ───────────────────────────────────────────────────────────── */ .topic-review-action, .subject-review-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border-radius: 999px !important; font-weight: 800 !important; letter-spacing: -.005em !important; padding: 4px 10px !important; border: 0 !important; font-size: 10.5px !important; line-height: 1.15 !important; cursor: pointer; color: #fff !important; white-space: nowrap !important; flex: 0 0 auto !important; width: auto !important; height: auto !important; max-width: 100% !important; box-sizing: border-box !important; transition: transform 220ms var(--owg-spring), box-shadow 220ms ease !important; } .topic-review-action.is-danger, .subject-review-btn.is-danger { background: var(--owg-grad-fire) !important; box-shadow: 0 6px 16px rgba(239, 68, 68, .42) !important; } .topic-review-action.is-warning, .subject-review-btn.is-warning { background: var(--owg-grad-4) !important; color: #422006 !important; box-shadow: 0 6px 16px rgba(250, 204, 21, .42) !important; } .topic-review-action.is-idle, .topic-review-action.is-success, .subject-review-btn.is-success { background: var(--owg-grad-3) !important; box-shadow: 0 6px 16px rgba(6, 182, 212, .35) !important; } .subject-review-btn.is-success { background: linear-gradient(135deg, rgba(45, 212, 191, .18), rgba(132, 204, 22, .18)) !important; color: #0e7490 !important; border: 1px solid rgba(45, 212, 191, .55) !important; } .topic-review-action:hover, .subject-review-btn:hover { transform: translateY(-1px) scale(1.02); } /* Stage pips (① ② ③) */ .stage-pip.active { color: var(--owg-violet) !important; filter: drop-shadow(0 0 6px rgba(139, 92, 246, .55)); } .stage-pip.done { color: var(--owg-cyan) !important; } .stage-next-due { background: var(--owg-grad-fire) !important; color: #fff !important; border-radius: 999px !important; padding: 2px 10px !important; font-weight: 800 !important; font-size: 11px !important; box-shadow: 0 4px 10px rgba(239, 68, 68, .35); } .stage-next-warn { background: var(--owg-grad-4) !important; color: #422006 !important; border-radius: 999px !important; padding: 2px 10px !important; font-weight: 800 !important; font-size: 11px !important; } .stage-next-ok { background: linear-gradient(135deg, rgba(45, 212, 191, .2), rgba(132, 204, 22, .2)) !important; color: #0e7490 !important; border-radius: 999px !important; padding: 2px 10px !important; font-weight: 800 !important; font-size: 11px !important; } /* ───────────────────────────────────────────────────────────── 15. Progress bar — neon meter ───────────────────────────────────────────────────────────── */ .progress-bar-wrap { background: rgba(139, 92, 246, .12) !important; border-radius: 999px !important; overflow: hidden; height: 10px !important; margin: 10px 0 6px !important; box-shadow: inset 0 2px 4px rgba(15, 23, 42, .08); } .progress-bar-fill { background: var(--owg-grad-1) !important; box-shadow: 0 0 14px rgba(139, 92, 246, .55), inset 0 1px 0 rgba(255, 255, 255, .35); transition: width 600ms var(--owg-spring) !important; height: 100%; } .progress-label { font-weight: 800 !important; font-size: 11.5px !important; letter-spacing: -.005em; color: var(--owg-ink-soft) !important; } .progress-label.is-placeholder { color: var(--owg-ink-mute) !important; opacity: .8; } /* ───────────────────────────────────────────────────────────── 16. Summary section — stat tiles ───────────────────────────────────────────────────────────── */ .summary-section { margin: 32px 0 !important; padding: 26px !important; } .summary-section h2 { font-weight: 900 !important; letter-spacing: -.04em !important; font-size: 22px !important; background: linear-gradient(135deg, #0f172a 0%, #4c1d95 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; margin-bottom: 22px !important; text-align: center; } .summary-grid { display: grid !important; gap: 14px !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; } .summary-grid > div, .summary-grid > article { padding: 22px !important; } .summary-grid > div .stat-value, .summary-grid > article .stat-value { font-size: clamp(28px, 4vw, 36px) !important; } /* ───────────────────────────────────────────────────────────── 17. SEO link cards — mini pillows ───────────────────────────────────────────────────────────── */ .seo-section { margin: 32px 0 !important; padding: 26px !important; } .seo-section h2 { font-weight: 900 !important; letter-spacing: -.04em !important; font-size: 20px !important; background: linear-gradient(135deg, #0f172a 0%, #4c1d95 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; margin-bottom: 12px !important; } .seo-section-lead { color: var(--owg-ink-soft) !important; font-weight: 600 !important; margin-bottom: 16px !important; line-height: 1.55; } .seo-link-grid { display: grid !important; gap: 12px !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; margin-top: 12px; } .seo-link-card { padding: 16px 18px !important; text-decoration: none !important; display: flex; flex-direction: column; gap: 4px; } .seo-link-card strong { font-weight: 900 !important; letter-spacing: -.02em !important; font-size: 14.5px !important; background: linear-gradient(135deg, #0f172a, #4c1d95); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .seo-link-card span { color: var(--owg-ink-mute) !important; font-weight: 600; font-size: 12.5px; } /* ───────────────────────────────────────────────────────────── 18. FAQ — pillow accordion ───────────────────────────────────────────────────────────── */ .faq-visible-list { display: flex !important; flex-direction: column; gap: 12px !important; margin-top: 14px; } .faq-visible-item { padding: 0 !important; overflow: hidden; } .faq-visible-item summary { cursor: pointer; padding: 16px 22px !important; font-weight: 800 !important; letter-spacing: -.01em !important; color: var(--owg-ink) !important; font-size: 14.5px !important; list-style: none; position: relative; } .faq-visible-item summary::after { content: '⌄'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-weight: 900; font-size: 18px; color: var(--owg-violet-2); transition: transform 280ms var(--owg-spring); } .faq-visible-item[open] summary::after { transform: translateY(-50%) rotate(180deg); } .faq-visible-item[open] summary { background: linear-gradient(135deg, rgba(139, 92, 246, .08), rgba(6, 182, 212, .06)); background: var(--owg-grad-1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .faq-visible-answer { padding: 0 22px 18px !important; color: var(--owg-ink-soft) !important; font-weight: 600; line-height: 1.6; } /* ───────────────────────────────────────────────────────────── 19. Topic completion age chip ───────────────────────────────────────────────────────────── */ .topic-completion-age { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-weight: 800; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; } .topic-completion-age.is-fresh { background: rgba(45, 212, 191, .18); color: #0e7490; border: 1px solid rgba(45, 212, 191, .35); } .topic-completion-age.is-warning { background: rgba(250, 204, 21, .18); color: #854d0e; border: 1px solid rgba(250, 204, 21, .55); } .topic-completion-age.is-stale { background: rgba(239, 68, 68, .18); color: #991b1b; border: 1px solid rgba(239, 68, 68, .45); } /* ───────────────────────────────────────────────────────────── 20. Hide the planner-sync-actions empty box when ÖDP-linked (the floating pill already conveys that signal) ───────────────────────────────────────────────────────────── */ body[data-odp-linked="1"] .planner-sync-actions:empty { display: none; } /* ───────────────────────────────────────────────────────────── 21. Linked distribution modal scroll repair ───────────────────────────────────────────────────────────── */ body[data-odp-linked="1"] .gdist-overlay.open { align-items: flex-start !important; justify-content: center !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(104px, env(safe-area-inset-bottom, 0px)) !important; } body[data-odp-linked="1"] .gdist-modal { width: min(920px, calc(100vw - 20px)) !important; min-height: 0 !important; margin: 0 auto !important; } body[data-odp-linked="1"] .gdist-modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } body[data-odp-linked="1"] .gdist-subject-content, body[data-odp-linked="1"] .gdist-subject-block, body[data-odp-linked="1"] .distribution-table, body[data-odp-linked="1"] .distribution-topic-button, body[data-odp-linked="1"] .distribution-topic-static { min-width: 0 !important; } body[data-odp-linked="1"] .table-responsive { max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x pan-y !important; } body[data-odp-linked="1"] .topic-history-overlay, body[data-odp-linked="1"] .topic-source-viewer-overlay { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } body[data-odp-linked="1"] .topic-history-body { min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } @media (max-width: 760px), (pointer: coarse) { body[data-odp-linked="1"] .gdist-overlay.open { display: block !important; } body[data-odp-linked="1"] .gdist-modal { max-height: none !important; height: auto !important; overflow: visible !important; } body[data-odp-linked="1"] .gdist-modal-body { max-height: none !important; overflow: visible !important; } } @media (min-width: 761px) and (pointer: fine) { body[data-odp-linked="1"] .gdist-modal { max-height: calc(100dvh - 124px) !important; } } /* ───────────────────────────────────────────────────────────── 22. Misc polish ───────────────────────────────────────────────────────────── */ .accordion { border-radius: 18px !important; border: 1px solid var(--owg-stroke) !important; background: var(--owg-pillow-tint) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(15, 23, 42, .05) !important; overflow: hidden; } .accordion summary { cursor: pointer; padding: 14px 18px !important; font-weight: 800 !important; color: var(--owg-ink) !important; letter-spacing: -.01em; position: relative; list-style: none; } .accordion summary::after { content: '⌄'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-weight: 900; color: var(--owg-violet-2); transition: transform 280ms var(--owg-spring); } .accordion[open] summary::after { transform: translateY(-50%) rotate(180deg); } .accordion-body { padding: 0 18px 16px !important; color: var(--owg-ink-soft) !important; font-weight: 600; line-height: 1.6; } /* Ad banner — soften */ .ad-banner { border-radius: 18px !important; border: 1px dashed rgba(139, 92, 246, .25) !important; background: rgba(139, 92, 246, .05) !important; } /* ───────────────────────────────────────────────────────────── 22. Responsive — disable 3D tilt on mobile (perf + readability) ───────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .subject-grid > div, .subject-grid > article, .summary-grid > div, .summary-grid > article, .seo-link-card, .surface-link-panel, .faq-visible-item, .countdown-container, .controls, .summary-section, .seo-section { transform: none !important; } .subject-grid > div:hover, .subject-grid > article:hover, .summary-grid > div:hover, .summary-grid > article:hover, .seo-link-card:hover, .surface-link-panel:hover, .faq-visible-item:hover { transform: translateY(-2px) !important; } body[data-content-page="true"] .header h1 { font-size: clamp(22px, 6vw, 32px) !important; } .surface-link-panel { padding: 14px 16px !important; } .countdown-container { padding: 18px 20px !important; } .countdown-number { font-size: 24px !important; } } /* ───────────────────────────────────────────────────────────── 23. Reduced motion ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .subject-grid > div, .subject-grid > article, .summary-grid > div, .summary-grid > article, .seo-link-card, .surface-link-panel, .faq-visible-item, .countdown-container, .controls { transform: none !important; } }