/* Four CSS-only header proposals over the existing header + menu markup. Preview: . Kept separate from night.css until a header is selected. */ :root[data-night-header] { --header-height: 84px; } :root[data-night-header] #templatemo_header_panel { background: var(--hero); position: relative; border-bottom: 1px solid var(--line); } :root[data-night-header] #templatemo_header_panel #templatemo_header_section { height: var(--header-height); display: flex; align-items: center; padding: 0; } :root[data-night-header] #templatemo_header_panel #templatemo_header_section h1 { position: static; margin: 0; padding: 0; font: 10px/1.5 var(--body); letter-spacing: .13em; color: var(--muted); } :root[data-night-header] #templatemo_header_panel #templatemo_header_section h1::before { margin: 0 0 5px; font: 750 31px/1.1 var(--heading); letter-spacing: -.07em; color: var(--accent); } :root[data-night-header] #templatemo_header_panel #templatemo_header_section h1::after { content: none; } :root[data-night-header] #templatemo_header_panel #templatemo_header_section #templatemo_title_section { display: none; } :root[data-night-header] #templatemo_menu_panel { background: var(--surface); } :root[data-night-header] #templatemo_menu_panel #templatemo_menu_section ul.sdt_menu { padding-block: 10px; min-height: 64px; } :root[data-night-header] #templatemo_menu_section ul.sdt_menu li > a { padding-block: 10px; } /* 01 — Tichá linka: identity on the left, a quiet sentence on the right. */ :root[data-night-header='strip'] #templatemo_header_panel { background: var(--page); } :root[data-night-header='strip'] #templatemo_header_panel #templatemo_header_section h1 { display: flex; align-items: center; gap: 20px; } :root[data-night-header='strip'] #templatemo_header_panel #templatemo_header_section h1::before { margin: 0; } :root[data-night-header='strip'] #templatemo_header_panel #templatemo_header_section::after { content: 'Místo pro tvoje myšlenky.'; margin-left: auto; padding-left: 28px; color: var(--muted); font: 15px/1.5 var(--body); } /* 02 — Malý měsíc: a small editorial masthead, with one short line. */ :root[data-night-header='moon'] { --header-height: 120px; } :root[data-night-header='moon'] #templatemo_header_panel { background: radial-gradient(ellipse at 87% 50%, #302840, transparent 45%), var(--hero); } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section h1::after, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section h1::after { content: 'Nemusíš na to být sám.'; position: absolute; left: 270px; top: 0; bottom: 0; display: flex; align-items: center; width: calc(100% - 420px); padding: 0; margin: 0; color: var(--ink); font: 500 27px/1.25 var(--body); letter-spacing: -.03em; text-transform: none; white-space: normal; } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section { display: block; width: 64px; height: 64px; top: 28px; right: 20px; border: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 42px #c4b2f619; } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section::before, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section::before { content: ''; position: absolute; inset: -4px -9px 9px 15px; border: 0; border-radius: 50%; background: #28243a; } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section::after { content: ''; width: 3px; height: 3px; top: 10px; left: -22px; border-radius: 50%; background: var(--accent); box-shadow: 113px 28px #c4b2f680, 18px 56px #c4b2f64d; } /* 03 — Jedna lišta: the original logo link and navigation share one band. */ @media (min-width: 1001px) { :root[data-night-header='inline'] { --header-height: 0px; } :root[data-night-header='inline'] #templatemo_header_panel { height: 0; border: 0; overflow: visible; } :root[data-night-header='inline'] #templatemo_header_panel #templatemo_header_section h1 { position: absolute; left: 0; top: 17px; width: 190px; z-index: 3; font-size: 9px; } :root[data-night-header='inline'] #templatemo_header_panel #templatemo_header_section h1::before { font-size: 29px; } :root[data-night-header='inline'] #templatemo_menu_panel { background: var(--hero); } :root[data-night-header='inline'] #templatemo_menu_panel #templatemo_menu_section ul.sdt_menu { min-height: 83px; height: 83px; padding: 14px 0 14px 215px; flex-wrap: nowrap; } :root[data-night-header='inline'] #templatemo_menu_section ul.sdt_menu li > a { padding-inline: 12px; } :root[data-night-header='inline'] #templatemo_menu_section ul.sdt_menu .sdt_link { font-size: 13px; white-space: nowrap; } } /* 04 — Jemný svit: the text stays still; only light and the moon drift slowly. */ :root[data-night-header='glow'] { --header-height: 112px; } :root[data-night-header='glow'] #templatemo_header_panel { overflow: hidden; background: #141c2b; } :root[data-night-header='glow'] #templatemo_header_panel::before { content: ''; position: absolute; width: 620px; height: 250px; right: -30px; top: -68px; pointer-events: none; background: radial-gradient(ellipse, #b39ae24a, #897ac91a 42%, transparent 70%); opacity: .6; animation: night-header-light 18s ease-in-out infinite alternate; } :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section h1::after { content: 'Každý příběh má své místo.'; font-size: 26px; } :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section { width: 58px; height: 58px; top: 26px; right: 28px; box-shadow: 0 0 55px #c4b2f624; animation: night-header-moon 14s ease-in-out infinite alternate; } :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section::before { background: #23283d; } :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section::after { content: ''; width: 3px; height: 3px; left: -38px; top: 9px; background: #ddd2fa; border: 0; border-radius: 50%; box-shadow: 116px 38px #b9a9e7, 20px 53px #b9a9e770; } @keyframes night-header-light { from { transform: translate3d(-8px,0,0); opacity: .4; } to { transform: translate3d(12px,-4px,0); opacity: .7; } } @keyframes night-header-moon { from { transform: translateY(1px) rotate(-2deg); } to { transform: translateY(-3px) rotate(2deg); } } :root[data-motion='paused'] #templatemo_header_panel::before, :root[data-motion='paused'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section { animation-play-state: paused; } @media (max-width: 1000px) { :root[data-night-header='inline'] { --header-height: 76px; } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section h1::after, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section h1::after { left: 230px; width: calc(100% - 335px); font-size: 22px; } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section { right: 8px; } } @media (max-width: 760px) { :root[data-night-header] { --header-height: 84px; } :root[data-night-header] #templatemo_header_panel #templatemo_header_section { width: calc(100% - 40px); } :root[data-night-header] #templatemo_header_panel #templatemo_header_section h1 { font-size: 9px; letter-spacing: .1em; } :root[data-night-header] #templatemo_header_panel #templatemo_header_section h1::before { font-size: 28px; } :root[data-night-header='strip'] #templatemo_header_panel #templatemo_header_section h1 { display: block; } :root[data-night-header='strip'] #templatemo_header_panel #templatemo_header_section h1::before { margin-bottom: 5px; } :root[data-night-header='strip'] #templatemo_header_panel #templatemo_header_section::after { content: none; } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section h1::after, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section h1::after { content: none; } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section { width: 42px; height: 42px; top: 21px; right: 12px; } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section::before, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section::before { inset: -3px -6px 7px 10px; } :root[data-night-header='moon'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section::after, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section::after { width: 2px; height: 2px; left: -17px; top: 6px; box-shadow: 60px 30px #c4b2f680; } } @media (prefers-reduced-motion: reduce) { :root[data-night-header='glow'] #templatemo_header_panel::before, :root[data-night-header='glow'] #templatemo_header_panel #templatemo_header_section #templatemo_title_section { animation: none !important; } }