/** * Odyssey Shore — presentational styles * * Sections: * 1. Tokens & variable-font tuning * 2. Base / accessibility * 3. Decorative primitives (waves, grain, orbs, tape) * 4. Header * 5. Hero * 6. Post cards & archives * 7. Single post * 8. Footer * 9. Block styles * 10. Motion & scroll reveal * 11. Comments & forms * 12. Hostinger AI block compatibility shims * 13. Print */ /* --------------------------------------------------------------------------- * 1. Tokens & variable-font tuning * ------------------------------------------------------------------------- */ :root { --os-ease: cubic-bezier(0.22, 1, 0.36, 1); --os-dur: 320ms; --os-dur-slow: 620ms; --os-header-h: 4.75rem; --os-radius-s: 8px; --os-radius-m: 16px; --os-radius-l: 28px; --os-rule: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent); --os-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); --os-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64C240,120,480,8,720,36C960,64,1200,116,1440,76L1440,120L0,120Z' fill='%23000'/%3E%3C/svg%3E"); --os-wave-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40C180,72,360,8,540,26C720,44,900,72,1080,58C1200,48,1320,28,1440,40L1440,80L0,80Z' fill='%23000'/%3E%3C/svg%3E"); } /* Fraunces is a variable font with optical-size, SOFT and WONK axes. Nudging them gives headings their warm, slightly hand-cut feel. */ h1, h2, h3, h4, h5, .wp-block-post-title, .wp-block-site-title, .has-display-font-family { font-variation-settings: "SOFT" 32, "WONK" 1, "opsz" 96; font-optical-sizing: auto; } h4, h5, .wp-block-post-title.has-large-font-size { font-variation-settings: "SOFT" 22, "WONK" 0, "opsz" 36; } /* --------------------------------------------------------------------------- * 2. Base / accessibility * ------------------------------------------------------------------------- */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--os-header-h) + 1.5rem); -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* `clip` contains full-bleed decoration without making a scroll container — `overflow-x: hidden` would silently break the sticky header. The hidden declaration is only a fallback for very old engines. */ overflow-x: hidden; overflow-x: clip; } ::selection { background: color-mix(in srgb, var(--wp--preset--color--accent-2) 45%, transparent); color: var(--wp--preset--color--contrast); } /* Visible, on-brand focus ring everywhere. Never removed. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--ocean); outline-offset: 3px; border-radius: var(--os-radius-s); } .skip-link.screen-reader-text:focus { background: var(--wp--preset--color--ocean); color: var(--wp--preset--color--base); border-radius: 0 0 var(--os-radius-m) 0; padding: 0.85rem 1.4rem; font-weight: 700; z-index: 100000; } /* Long words and URLs must never blow out the layout. */ p, li, h1, h2, h3, h4, h5, h6, .wp-block-post-title { overflow-wrap: break-word; } /* Comfortable measure for body copy inside the content column. */ .wp-block-post-content > p, .entry-content > p { max-width: 62ch; } .wp-block-post-content > p.has-text-align-center, .wp-block-post-content > p.alignwide, .wp-block-post-content > p.alignfull { max-width: none; } img, .wp-block-image img, .wp-block-post-featured-image img { height: auto; max-width: 100%; } /* --------------------------------------------------------------------------- * 3. Decorative primitives * ------------------------------------------------------------------------- */ /* Wave divider. Colour is driven by --os-wave-color so a wave can sit between any two sections and pick up the colour of the one below it. */ .os-wave-bottom, .os-wave-top { position: relative; } .os-wave-bottom::after, .os-wave-top::before { content: ""; position: absolute; left: -1px; right: -1px; height: clamp(2.5rem, 6vw, 6.5rem); background-color: var(--os-wave-color, var(--wp--preset--color--base)); -webkit-mask-image: var(--os-wave); mask-image: var(--os-wave); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; z-index: 2; } .os-wave-bottom::after { bottom: -1px; } .os-wave-top::before { top: -1px; transform: scaleY(-1); } .os-wave-bottom.is-style-soft::after, .os-wave-top.is-style-soft::before { -webkit-mask-image: var(--os-wave-soft); mask-image: var(--os-wave-soft); } /* Fine film grain — adds warmth over flat colour and photography. */ .os-grain { position: relative; isolation: isolate; } .os-grain::before { content: ""; position: absolute; inset: 0; background-image: var(--os-grain); background-size: 160px 160px; opacity: 0.16; mix-blend-mode: multiply; pointer-events: none; z-index: 1; } /* Soft sun/lagoon light blooms that drift behind hero content. */ .os-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .os-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; will-change: transform; } .os-orb--sun { width: 26rem; height: 26rem; top: -8rem; right: -6rem; background: radial-gradient(circle, rgba(229, 160, 60, 0.75), transparent 68%); animation: os-drift 22s var(--os-ease) infinite alternate; } .os-orb--lagoon { width: 22rem; height: 22rem; bottom: -7rem; left: -5rem; background: radial-gradient(circle, rgba(76, 151, 143, 0.6), transparent 68%); animation: os-drift 28s var(--os-ease) infinite alternate-reverse; } @keyframes os-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2.5rem, 1.75rem, 0) scale(1.12); } } /* --------------------------------------------------------------------------- * 4. Header * ------------------------------------------------------------------------- */ /* The sticky element must be the template-part wrapper itself — a sticky child can never travel outside its parent's box, so styling the inner group alone would look sticky in the editor and do nothing on the front end. The :has() selector is a fallback for when the className is edited away in the Site Editor. */ .os-header, .wp-block-template-part:has(> .os-header-inner) { position: sticky; top: 0; z-index: 500; background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--os-dur) var(--os-ease), background-color var(--os-dur) var(--os-ease), box-shadow var(--os-dur) var(--os-ease); } /* .is-scrolled is toggled by assets/js/odyssey.js on whichever element is the sticky one, so match it on both. */ .os-header.is-scrolled, .wp-block-template-part.is-scrolled { border-bottom-color: var(--os-rule); background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent); box-shadow: 0 2px 20px rgba(43, 39, 36, 0.06); } /* Everything below hangs off .os-header-inner, which lives in the header template part and survives edits to the outer wrapper. */ .os-header-inner .wp-block-site-logo img { border-radius: 50%; transition: transform var(--os-dur) var(--os-ease); } .os-header-inner .wp-block-site-logo a:hover img { transform: rotate(-6deg) scale(1.06); } /* Understated animated underline on nav links. */ .os-header-inner .wp-block-navigation-item__content { position: relative; padding-block: 0.35rem; } .os-header-inner .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--os-dur) var(--os-ease); } .os-header-inner .wp-block-navigation-item__content:hover::after, .os-header-inner .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); transform-origin: left; } /* Mobile overlay menu */ .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--base) !important; padding: clamp(1.5rem, 6vw, 3rem); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; } /* Reading-progress bar, rendered by odyssey.js on single posts only. */ .os-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--wp--preset--gradient--sunset, linear-gradient(135deg, #C4633C, #E5A03C)); z-index: 600; pointer-events: none; } /* --------------------------------------------------------------------------- * 5. Hero * ------------------------------------------------------------------------- */ .os-hero { position: relative; isolation: isolate; overflow: hidden; } .os-hero > .wp-block-group__inner-container { position: relative; z-index: 3; } /* Photographic hero: warm the image and keep text legible over it. */ .os-hero.has-background-image::before, .os-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(43, 39, 36, 0.28) 0%, rgba(28, 76, 92, 0.55) 100%); } .os-hero__eyebrow { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.75rem; } .os-hero__eyebrow::before, .os-hero__eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.55; } /* Slow, subtle scale on the hero image — the "breathing horizon". */ .os-hero .wp-block-cover__image-background, .os-hero.has-background-image { animation: os-breathe 26s var(--os-ease) infinite alternate; } @keyframes os-breathe { from { transform: scale(1); } to { transform: scale(1.07); } } /* Scroll cue */ .os-scroll-cue { display: inline-block; width: 1.5rem; height: 2.5rem; border: 2px solid currentColor; border-radius: var(--os-radius-l); opacity: 0.6; position: relative; } .os-scroll-cue::after { content: ""; position: absolute; left: 50%; top: 0.45rem; width: 3px; height: 0.5rem; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: os-cue 1.9s var(--os-ease) infinite; } @keyframes os-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(0.85rem); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } /* --------------------------------------------------------------------------- * 6. Post cards & archives * ------------------------------------------------------------------------- */ .os-cards .wp-block-post { position: relative; display: flex; flex-direction: column; background: var(--wp--preset--color--foam); border: 1px solid var(--os-rule); border-radius: var(--os-radius-l); overflow: hidden; transition: transform var(--os-dur) var(--os-ease), box-shadow var(--os-dur) var(--os-ease), border-color var(--os-dur) var(--os-ease); } .os-cards .wp-block-post:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent); box-shadow: var(--wp--preset--shadow--lifted, 0 18px 44px rgba(43, 39, 36, 0.1)); } .os-cards .wp-block-post-featured-image { margin: 0; border-radius: 0; overflow: hidden; aspect-ratio: 3 / 2; } .os-cards .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform var(--os-dur-slow) var(--os-ease); } .os-cards .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.06); } /* Core's flow layout injects margin-block-start between siblings; inside a flex column that fights the gap. Zero it and let gap do the spacing. */ .os-cards .wp-block-post > * { margin-block: 0; } .os-cards .os-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.65rem; padding: clamp(1.4rem, 3vw, 1.9rem); } .os-cards .os-card__body > * { margin-block: 0; } /* Date sits at the bottom of the card regardless of excerpt length, so a row of cards keeps a consistent baseline. */ .os-cards .os-card__body > .wp-block-post-date { margin-top: auto; padding-top: 0.4rem; } /* Posts with no featured image still need presence — give them a gradient. */ .os-cards .wp-block-post:not(:has(.wp-block-post-featured-image))::before { content: ""; display: block; height: 0.5rem; background: var(--wp--preset--gradient--sunset, linear-gradient(135deg, #C4633C, #E5A03C)); } /* Whole card is clickable via the title link's expanded hit area. */ .os-cards .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .os-cards .wp-block-post-excerpt, .os-cards .wp-block-post-date { position: relative; z-index: 2; pointer-events: none; } .os-cards .wp-block-post-excerpt__more-link { pointer-events: auto; } /* "Read more" affordance */ .os-readmore { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--accent); } .os-readmore::after { content: "→"; transition: transform var(--os-dur) var(--os-ease); } .wp-block-post:hover .os-readmore::after { transform: translateX(0.35rem); } /* Pagination */ .wp-block-query-pagination { margin-top: var(--wp--preset--spacing--50); gap: 0.5rem; align-items: center; } .wp-block-query-pagination a, .wp-block-query-pagination .current { text-decoration: none; padding: 0.55rem 0.95rem; border-radius: var(--os-radius-pill, 999px); font-weight: 700; font-size: var(--wp--preset--font-size--small); transition: background-color var(--os-dur) var(--os-ease), color var(--os-dur) var(--os-ease); } .wp-block-query-pagination a:hover { background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--ocean); } .wp-block-query-pagination .current { background: var(--wp--preset--color--ocean); color: var(--wp--preset--color--base); } /* --------------------------------------------------------------------------- * 7. Single post * ------------------------------------------------------------------------- */ .os-article .wp-block-post-content { font-size: clamp(1.0625rem, 0.99rem + 0.3vw, 1.1875rem); line-height: 1.78; } .os-article .wp-block-post-content > h2 { margin-top: var(--wp--preset--spacing--50); } .os-article .wp-block-post-content > h3 { margin-top: var(--wp--preset--spacing--40); } /* Opening paragraph gets a little editorial lift. */ .os-article .wp-block-post-content > p:first-of-type { font-size: 1.15em; color: var(--wp--preset--color--contrast); line-height: 1.62; } .os-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); } .os-meta__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--wp--preset--color--contrast-3); display: inline-block; } /* Featured image on single posts, framed like a photograph. */ .os-article > .wp-block-post-featured-image { border-radius: var(--os-radius-l); overflow: hidden; box-shadow: var(--wp--preset--shadow--deep, 0 32px 70px rgba(28, 76, 92, 0.16)); } /* Post navigation */ .os-postnav { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: 1fr; } @media (min-width: 40rem) { .os-postnav { grid-template-columns: 1fr 1fr; } } .os-postnav .wp-block-post-navigation-link { background: var(--wp--preset--color--base-2); border-radius: var(--os-radius-m); padding: 1.35rem 1.6rem; transition: background-color var(--os-dur) var(--os-ease); } .os-postnav .wp-block-post-navigation-link:hover { background: var(--wp--preset--color--base-3); } .os-postnav .wp-block-post-navigation-link a { text-decoration: none; font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--contrast); } .os-postnav .post-navigation-link-next { text-align: right; } /* --------------------------------------------------------------------------- * 8. Footer * ------------------------------------------------------------------------- */ .os-footer a { text-decoration: none; } .os-footer a:hover { text-decoration: underline; } .os-footer .wp-block-social-links .wp-social-link { transition: transform var(--os-dur) var(--os-ease); } .os-footer .wp-block-social-links .wp-social-link:hover { transform: translateY(-3px); } /* --------------------------------------------------------------------------- * 9. Block styles (registered in functions.php) * ------------------------------------------------------------------------- */ /* Group → "Postcard": a tilted card with a taped corner. */ .wp-block-group.is-style-os-postcard { position: relative; background: var(--wp--preset--color--foam); border-radius: var(--os-radius-s); padding: clamp(1.75rem, 4vw, 3rem); box-shadow: var(--wp--preset--shadow--lifted, 0 18px 44px rgba(43, 39, 36, 0.1)); transform: rotate(-0.75deg); transition: transform var(--os-dur) var(--os-ease); } .wp-block-group.is-style-os-postcard:hover { transform: rotate(0deg); } .wp-block-group.is-style-os-postcard::before { content: ""; position: absolute; top: -0.7rem; left: 50%; width: 6.5rem; height: 1.6rem; transform: translateX(-50%) rotate(-2.5deg); background: color-mix(in srgb, var(--wp--preset--color--base-3) 80%, transparent); box-shadow: 0 1px 3px rgba(43, 39, 36, 0.12); } /* Image → "Polaroid" */ .wp-block-image.is-style-os-polaroid img { border-radius: 2px; } .wp-block-image.is-style-os-polaroid { background: var(--wp--preset--color--foam); padding: 0.9rem 0.9rem 0; border-radius: 3px; box-shadow: var(--wp--preset--shadow--lifted, 0 18px 44px rgba(43, 39, 36, 0.1)); transform: rotate(-1.5deg); transition: transform var(--os-dur) var(--os-ease); } .wp-block-image.is-style-os-polaroid:hover { transform: rotate(0deg) scale(1.02); } .wp-block-image.is-style-os-polaroid figcaption { font-family: var(--wp--preset--font-family--display); font-style: italic; text-align: center; padding: 0.85rem 0.25rem 1.1rem; margin: 0; } /* Image → "Porthole" */ .wp-block-image.is-style-os-porthole img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 6px solid var(--wp--preset--color--foam); box-shadow: var(--wp--preset--shadow--soft, 0 8px 24px rgba(43, 39, 36, 0.06)); } /* Image → "Arch" — a doorway/window onto somewhere else. */ .wp-block-image.is-style-os-arch img { border-radius: 50vw 50vw var(--os-radius-m) var(--os-radius-m); object-fit: cover; } /* Button → "Sea Glass": translucent, for use over photography. */ .wp-block-button.is-style-os-seaglass .wp-block-button__link { background: color-mix(in srgb, var(--wp--preset--color--foam) 16%, transparent); color: var(--wp--preset--color--base); border: 1px solid color-mix(in srgb, var(--wp--preset--color--foam) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; } .wp-block-button.is-style-os-seaglass .wp-block-button__link:hover { background: color-mix(in srgb, var(--wp--preset--color--foam) 28%, transparent); color: var(--wp--preset--color--base); } /* Button → "Ink Outline" */ .wp-block-button.is-style-os-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1.5px solid var(--wp--preset--color--contrast); box-shadow: none; } .wp-block-button.is-style-os-outline .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } /* Separator → "Wave" */ .wp-block-separator.is-style-os-wave { border: none; height: 1.5rem; width: min(12rem, 60%); background-color: var(--wp--preset--color--accent); opacity: 0.6; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M0,10 Q15,0 30,10 T60,10 T90,10 T120,10' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M0,10 Q15,0 30,10 T60,10 T90,10 T120,10' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Separator → "Compass" */ .wp-block-separator.is-style-os-compass { border: none; height: 1.25rem; width: min(16rem, 70%); position: relative; background: linear-gradient(90deg, transparent, var(--os-rule) 20%, var(--os-rule) 80%, transparent); background-size: 100% 1px; background-repeat: no-repeat; background-position: center; } .wp-block-separator.is-style-os-compass::after { content: "✦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--wp--preset--color--base); padding: 0 0.75rem; color: var(--wp--preset--color--accent); font-size: 0.85rem; line-height: 1; } /* Quote → "Postcard Quote" */ .wp-block-quote.is-style-os-quote { border: none; background: var(--wp--preset--color--base-2); border-radius: var(--os-radius-l); padding: clamp(2rem, 4vw, 3.25rem); position: relative; text-align: center; } .wp-block-quote.is-style-os-quote::before { content: "\201C"; display: block; font-family: var(--wp--preset--font-family--display); font-size: 4rem; line-height: 0.6; color: var(--wp--preset--color--accent); opacity: 0.5; margin-bottom: 0.75rem; } .wp-block-quote.is-style-os-quote cite { display: block; margin-top: 1.25rem; font-family: var(--wp--preset--font-family--body); font-style: normal; font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); } /* Cover → "Framed" */ .wp-block-cover.is-style-os-framed::after { content: ""; position: absolute; inset: clamp(0.75rem, 2vw, 1.5rem); border: 1px solid color-mix(in srgb, var(--wp--preset--color--foam) 45%, transparent); border-radius: var(--os-radius-m); pointer-events: none; z-index: 2; } /* --------------------------------------------------------------------------- * 10. Motion & scroll reveal * ------------------------------------------------------------------------- */ /* Nothing is hidden unless JS has confirmed it can reveal it again — the .js-reveal class is set on by an inline script in the head. */ .js-reveal .os-reveal, .js-reveal .hostinger-ai-fade-up { opacity: 0; transform: translateY(1.75rem); transition: opacity var(--os-dur-slow) var(--os-ease), transform var(--os-dur-slow) var(--os-ease); will-change: opacity, transform; } .js-reveal .os-reveal.is-visible, .js-reveal .hostinger-ai-fade-up.is-visible { opacity: 1; transform: none; } /* Stagger children of a revealed group. */ .js-reveal .os-reveal-stagger > * { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--os-dur-slow) var(--os-ease), transform var(--os-dur-slow) var(--os-ease); } .js-reveal .os-reveal-stagger.is-visible > * { opacity: 1; transform: none; } .js-reveal .os-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } .js-reveal .os-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; } .js-reveal .os-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; } .js-reveal .os-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; } .js-reveal .os-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; } .js-reveal .os-reveal-stagger.is-visible > *:nth-child(n+6) { transition-delay: 450ms; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Reveal targets must end up visible, not stuck at opacity 0. */ .js-reveal .os-reveal, .js-reveal .hostinger-ai-fade-up, .js-reveal .os-reveal-stagger > * { opacity: 1 !important; transform: none !important; } .os-orb, .os-scroll-cue::after, .os-hero .wp-block-cover__image-background, .os-hero.has-background-image { animation: none !important; } } /* --------------------------------------------------------------------------- * 11. Comments & forms * ------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], textarea, select, .wp-block-search__input { background: var(--wp--preset--color--foam); border: 1px solid var(--os-rule); border-radius: var(--os-radius-m); padding: 0.8rem 1.1rem; font-family: inherit; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); transition: border-color var(--os-dur) var(--os-ease), box-shadow var(--os-dur) var(--os-ease); max-width: 100%; } input:focus, textarea:focus, select:focus, .wp-block-search__input:focus { border-color: var(--wp--preset--color--lagoon); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--lagoon) 25%, transparent); } .wp-block-comments .comment-body { background: var(--wp--preset--color--base-2); border-radius: var(--os-radius-m); padding: clamp(1.25rem, 3vw, 1.85rem); margin-bottom: var(--wp--preset--spacing--30); } .wp-block-comments .comment-author img, .wp-block-post-author__avatar img { border-radius: 50%; } .wp-block-post-comments-form .comment-reply-title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); } /* --------------------------------------------------------------------------- * 12. Hostinger AI block compatibility shims * * The existing Home and Blog pages were generated by the Hostinger AI builder * and still carry hostinger-ai-* classes. The plugin that styled them is * deactivated, so these rules keep that markup looking intentional under this * theme. Safe to delete once the pages are rebuilt with theme patterns. * ------------------------------------------------------------------------- */ .hostinger-ai-background-image { background-repeat: no-repeat; position: relative; isolation: isolate; } .hostinger-ai-hero-opacity::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 39, 36, 0.32) 0%, rgba(28, 76, 92, 0.6) 100%); z-index: -1; } .hostinger-ai-title { font-family: var(--wp--preset--font-family--display); letter-spacing: -0.022em; } .hostinger-ai-description { font-family: var(--wp--preset--font-family--body); line-height: 1.65; opacity: 0.94; } .hostinger-ai-cta-button .wp-block-button__link { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: color-mix(in srgb, var(--wp--preset--color--foam) 16%, transparent); border-color: color-mix(in srgb, var(--wp--preset--color--foam) 65%, transparent); transition: background-color var(--os-dur) var(--os-ease), transform var(--os-dur) var(--os-ease); } .hostinger-ai-cta-button .wp-block-button__link:hover { background: color-mix(in srgb, var(--wp--preset--color--foam) 30%, transparent); transform: translateY(-2px); } .hostinger-ai-our-blog-1 .wp-block-post-title a { text-decoration: none; } /* The AI builder emits colour classes this palette does not define. Map the ones actually used on the site so nothing renders as unstyled black. */ .has-color-1-color { color: var(--wp--preset--color--base) !important; } .has-dark-color { color: var(--wp--preset--color--contrast) !important; } /* --------------------------------------------------------------------------- * 13. Print * ------------------------------------------------------------------------- */ @media print { .os-header, .os-footer, .os-progress, .os-orbs, .wp-block-post-comments-form, .os-postnav { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } }