@import url("hover-effects.css"); /* * Global stylesheet for the redesigned AStrokeofAi web suite. * * This file defines a dark, glass‑like aesthetic inspired by the * original site while dramatically simplifying the CSS. Variables * control the primary colours, glass backgrounds and gradients. The * layout consists of a fixed header, a persistent sidebar on * desktop, collapsible navigation on mobile, and a responsive main * content area. Common components such as forms, buttons, * overlays and the paywall are styled here. */ /* Reset and box sizing */ * { box-sizing: border-box; margin: 0; padding: 0; } /* CSS variables controlling the colour palette and glass effects */ :root { --picker-fg: #fff; /* picker button text: white on dark */ /* Colour palette derived from the original AStrokeofAi site. Deep indigo backgrounds with warm magenta accents lend a creative atmosphere. Adjust these variables to tweak the look and feel. */ --bg-color: #0b0629; /* base page background */ --bg-alt: #120a33; /* alternate background for gradients */ --primary-color: #cf3cb2; /* primary accent (formerly --accent) */ --secondary-color: rgba(255, 255, 255, 0.04); /* subtle panels */ --highlight-color: #e476c8; /* hover/secondary accent */ --text-color: #faf9ff; /* primary text on dark */ --glass-bg: rgba(255, 255, 255, 0.10); /* glassy backgrounds */ --glass-border: rgba(255, 255, 255, 0.20); /* thin glass borders */ } /* Light theme overrides. When data-theme="light" is present on the root element the following variables replace the dark palette. */ [data-theme="light"] { --bg-color: #fef9ff; --bg-alt: #f5effa; --primary-color: #d637b3; --secondary-color: rgba(0, 0, 0, 0.05); --highlight-color: #e98cd2; --text-color: #1c1735; --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(0, 0, 0, 0.2); --picker-fg: #111; /* picker button text: black on light */} /* Base typography and background */ body { font-family: 'Inter', sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.6; } /* Fixed header with gradient accent line */ header { position: fixed; top: 0; left: 0; right: 0; height: 56px; /* Use a 3‑column CSS grid to anchor the logo on the left, centre the hamburger and place the overlay trigger on the right. This ensures the middle column remains centred regardless of the animated logo width. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; padding: 0 16px; /* Replace the solid secondary colour with a translucent glass backdrop. The underlying content will be softly blurred and tinted using the liquid glass variables. */ background: rgba(50, 0, 75, 0.08); border-bottom: 1px solid var(--glass-border); z-index: 1000; /* Apply a subtle glass effect to the header. This blurs the content behind it while keeping the navigation elements crisp. The background colour is provided by CSS variables so it adapts in light/dark mode. */ backdrop-filter: blur(5px) saturate(100%); -webkit-backdrop-filter: blur(5px) saturate(100%); } header .logo { font-family: 'Playfair Display', serif; /* Scales on phones instead of capping */ font-size: clamp(0.85rem, 3vw, 1.5rem); line-height: 1.1; white-space: nowrap; color: var(--text-color); user-select: none; grid-column: 1; justify-self: start; display: flex; align-items: center; } /* Decorative accent dot before the logo text. A small circle in the primary colour is prepended to the brand name using a pseudo‑element. The dot helps visually tie the logo to the rest of the site’s colour palette. */ header .logo::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--primary-color); /* Align the dot vertically with the text baseline */ transform: translateY(1px); } /* --------------------------------------------------------------------- * CTA accent dot before primary buttons * * Add a small coloured dot before primary call-to-action buttons (such as * "Try the Planner Free") to replace the removed emoji. The dot uses * the same primary accent colour defined in the CSS variables. */ .cta-btn.cta-primary::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--primary-color); /* Align vertically with the button text */ transform: translateY(1px); } /* Centre the copyright text in the legal footer */ .legal-footer p { text-align: center; } /* Generic class to centre section titles on content pages */ .center-title { text-align: center; } /* Overlay menu trigger (vertical ellipsis) */ header #openOverlay { /* Draw the vertical ellipsis with a rainbow animated gradient. The background gradient is clipped to the text so the dots cycle through hues over time. */ background: linear-gradient(90deg, #ff004c, #ff7a00, #ffeb00, #33ff00, #00e5ff, #6b00ff, #ff00e5, #ff004c); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: header-rainbow 20s linear infinite; border: none; font-size: 1.5rem; line-height: 1; grid-column: 3; justify-self: end; margin-right: 8px; margin-left: 0; cursor: pointer; } /* Hide the overlay trigger on very small screens where space is limited? (optional) */ /* On larger screens we still display it so the user can access About/Contact. */ /* Gradient line at the bottom of the header */ header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0.5px; /* thinner line */ background: linear-gradient(90deg, #ff004c, #ff7a00, #ffeb00, #33ff00, #00e5ff, #6b00ff, #ff00e5, #ff004c); background-size: 300% 300%; animation: header-rainbow 20s linear infinite; filter: brightness(5.5); /* new effect */ } /* Hamburger icon for mobile navigation */ .hamburger { width: 32px; height: 24px; position: relative; border: none; background: none; cursor: pointer; /* Centre the hamburger in the middle column of the header grid. The grid layout ensures the button remains centred regardless of the logo width. */ grid-column: 2; justify-self: center; margin-left: 0; } .hamburger .line { position: absolute; left: 0; right: 0; height: 3px; /* Colour the hamburger bars with the primary accent colour. */ background: var(--primary-color); background-size: 300% 300%; } .hamburger .line:nth-child(1) { top: 0; } .hamburger .line:nth-child(2) { top: 50%; transform: translateY(-50%); } .hamburger .line:nth-child(3) { bottom: 0; } /* Transform lines into a cross when active */ .hamburger.active .line:nth-child(1) { transform: translateY(10px) rotate(45deg); } .hamburger.active .line:nth-child(2) { opacity: 0; } .hamburger.active .line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } /* Animated hover effect: tint the lines and scale slightly to mirror the playful interactions on the original site */ .hamburger:hover .line { /* Preserve the gradient on hover. Only scale horizontally for a subtle interaction effect. The background colour remains unchanged so the rainbow effect stays visible. */ transform: scaleX(1.4); } .hamburger:hover { transform: scale(1.08); } /* Sidebar navigation */ /* Active state is handled separately; hover state is defined below */ /* Hover state fills with the highlight colour and inverts the text */ /* Active state for current page link */ /* When the sidebar has the 'active' class applied it slides back into view. */ /* Disabled sidebar links appear muted and are not clickable */ /* Main content area */ main { margin-top: 30px; /* Centre the main content on the page and constrain its width on larger screens. Remove the fixed left margin because the sidebar overlays the content instead of pushing it aside. A maximum width prevents the text from stretching too far on widescreens, improving readability. */ margin-left: auto; margin-right: auto; padding: 24px; width: 100%; /* Shrink the overall content width so the body appears a bit less wide. */ /* Reduced from 850px to 800px for an even slimmer layout */ max-width: 1200px; } /* Responsive behaviour: collapse sidebar on small screens */ @media (max-width: 900px) { .hamburger { display: inline-block; } main { margin-left: 0; } } /* Section styling */ section { margin-bottom: 48px; } .hero { /* Make the hero take up a bit less vertical space so visitors see the start of the next section sooner. */ min-height: 15vh; display: flex; flex-direction: column; /* Centre the hero content horizontally and vertically. */ align-items: center; justify-content: center; /* Tighten the vertical padding to pull the hero higher on the page. */ padding: 3rem 2rem; /* Remove the hero‑specific gradient. The page background will provide the base colour and our global edge gradient will decorate the sides. */ background: none; text-align: center; /* Constrain the hero width to the same maximum as the main content. Match the reduced width used on the main container. */ max-width: 800px; margin-left: auto; margin-right: auto; } .hero h1 { font-family: 'Playfair Display', serif; font-size: 3rem; line-height: 1.2; margin-bottom: 1rem; /* Force hero headings to appear on separate lines. This overrides the default inline-block so that each phrase (Plan faster., Teach better., Keep your voice.) stacks vertically. */ display: block; } /* Bouncing accent bar below the hero heading. A vertical bar appears beneath each hero h1 and gently bounces up and down forever. This subtle animation draws the eye downward toward the content that follows. */ /* hero line disabled */ .hero h1::after { content: ''; display: block; width: 4px; height: 70px; margin: 1.2rem auto 0; border-radius: 2px; background: var(--primary-color); animation: hero-bounce 2s ease-in-out infinite; } @keyframes hero-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .hero p { font-size: 1.2rem; max-width: 600px; margin: 0; opacity: 0.85; } .tools ul { list-style: none; padding-left: 0; } .tools li { margin-bottom: 8px; } /* Form styling */ form { max-width: 600px; margin: 0 auto; } .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 4px; font-weight: 600; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text-color); /* Liquid glass enhancements */ backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 3px 3px rgba(200, 0, 250, 0.05); } .form-group textarea { min-height: 120px; resize: vertical; } .form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } button.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; } .btn-primary { background: var(--primary-color); color: #fff; } .btn-secondary { background: var(--highlight-color); color: #0d0220; } .btn-outline { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); } button.btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Output area styling */ .output { margin-top: 24px; padding: 16px; border-radius: 6px; background: var(--glass-bg); border: 1px solid var(--glass-border); white-space: pre-wrap; /* Liquid glass enhancements */ backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); } /* Overlay menu styles */ /* Paywall styles */ .paywall { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; background: rgba(13, 2, 32, 0.1); backdrop-filter: blur(12px); z-index: 1002; padding: 16px; overflow: auto; } .paywall .paywall-modal { background: var(--secondary-color); padding: 24px; border-radius: 8px; width: 90%; /* Allow the modal to grow wider so multiple subscription tiers can sit side by side. Removing the max‑width enables responsive layouts on larger screens. */ max-width: none; text-align: center; /* Liquid glass enhancements */ backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); max-height: 92dvh; overflow: auto; } .paywall .paywall-modal input { width: 100%; padding: 8px; margin-bottom: 12px; border-radius: 6px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text-color); } .paywall .paywall-modal button { padding: 10px 20px; border: none; border-radius: 6px; background: var(--primary-color); color: #fff; cursor: pointer; } .paywall .purchase-options { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .paywall .purchase-options button { padding: 8px 12px; background: var(--highlight-color); color: #0d0220; border-radius: 6px; cursor: pointer; border: none; } /* Close button inside the paywall. Mirrors the styling used for the overlay close button but scoped to the paywall so that it doesn’t inadvertently style other elements. */ .paywall .close-btn { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: var(--text-color); font-size: 22px; line-height: 1; cursor: pointer; z-index: 10; transition: background 0.2s ease, transform 0.1s ease; } .paywall .close-btn:hover { background: rgba(255, 255, 255, 0.14); } .paywall .close-btn:active { transform: scale(0.98); } /* Legal links section within the paywall. These links mirror the styling of the About/Contact buttons (rainbow-border) in the overlay menu. Arrange them horizontally with spacing and ensure they use the same glassy backdrop and border styling. */ .paywall .paywall-legal { margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .paywall .paywall-legal a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 8px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-color); text-decoration: none; position: relative; overflow: hidden; } .paywall .paywall-legal a:hover { background: var(--secondary-color); } /* Splash screen shown while generating AI content. Prevents interaction until the generation completes. */ .splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; background: rgba(13, 14, 35, 0.05); backdrop-filter: blur(10px); z-index: 1005; } .splash-screen .splash-content { padding: 2rem 3rem; border-radius: 12px; text-align: center; font-size: 1.4rem; color: var(--text-color); } /* Sidebar backdrop overlay When the sidebar is opened on any screen size we display a full‑screen translucent overlay that blurs the underlying page. Clicking the overlay will hide the sidebar. */ /* Rainbow animation for the header accent line */ @keyframes header-rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* Contact form reuse */ .contact-form input, .contact-form textarea { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text-color); margin-bottom: 12px; } .contact-form button { padding: 10px 20px; border: none; border-radius: 6px; background: var(--primary-color); color: #fff; cursor: pointer; } /* ------------------------------------------------------------------------- * Page edge gradients * * Apply a soft gradient along the left and right edges of the page using * the highlight colour. This gradient sits behind all content and does * not interfere with interaction. To adjust the intensity or colours * modify the opacity or the stops below. */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: linear-gradient(to right, var(--highlight-color) 0%, transparent 15%, transparent 35%, var(--highlight-color) 100%); opacity: 0.05; z-index: -1; } /* ------------------------------------------------------------------------- * Paywall tier layout * * Arrange the subscription tiers in a responsive grid and style the * containers with the liquid glass effect. These rules also define * custom buttons that replace the default PayPal subscribe widgets. */ .paypal-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-height: 60vh; overflow-y: auto; width: 100%; } .paypal-tier { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; padding: 1rem; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); text-align: center; } .paypal-tier h3 { margin-top: 0; } .paypal-tier .tier-desc { margin-bottom: 0.5rem; font-size: 0.9rem; opacity: 0.85; } /* Custom PayPal subscribe button using the liquid glass style */ .paypal-custom-btn { display: inline-block; padding: 10px 20px; margin-top: 0.5rem; border-radius: 6px; text-decoration: none; color: var(--text-color); background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); transition: background 0.3s ease, color 0.3s ease; } .paypal-custom-btn:hover { background: var(--highlight-color); color: var(--bg-color); } /* ------------------------------------------------------------------------- * Overlay modal for About/Contact/API menu * * The overlay occupies the full viewport and blurs the content behind it, * providing a focused canvas for secondary navigation items such as the * About and Contact links and the API key form. Display is toggled via * the `.active` class or by directly manipulating the element’s * inline `display` property in JavaScript. */ .overlay { position: fixed; inset: 0; /* Hidden by default; JavaScript toggles display or adds .active */ display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 2, 28, 0.40); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1002; } .overlay.active { display: flex; } /* Contained card within the overlay. Use the liquid-glass class on * `.overlay-content` to inherit the frosted glass effect. These rules * simply constrain the sizing and positioning of the card. */ .overlay .overlay-content { max-width: 400px; width: 100%; position: relative; padding: 28px 28px 28px; border-radius: 12px; /* Sizing & padding to avoid overlap and clipping */ width: min(840px, 92vw); padding: 64px 28px 28px; /* extra top space for the × button */ min-height: 60vh; max-height: 88vh; overflow-y: auto; /* scroll if content grows */ } /* Close button inside the overlay */ .overlay .close-btn { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: var(--text-color); font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; top: 16px; right: 16px; z-index: 5; position: absolute; top: 20px; right: 20px; z-index: 10; } .overlay .close-btn:hover { background: rgba(255,255,255,0.14); } .overlay .close-btn:active { transform: scale(0.98); } /* Prevent background scrolling when any overlay is open */ body.overlay-open { overflow: hidden; } /* ----------------------------------------------------------------------- * Legal footer styling * * The privacy policy, terms of service and refund policy links in the * footer are presented as glassy buttons with a subtle rainbow border. * This matches the About/Contact buttons in the overlay menus. * ---------------------------------------------------------------------*/ .legal-footer .legal-links { /* Arrange the footer links horizontally and allow them to shrink on small screens. */ display: flex; justify-content: center; gap: 0.5rem; /* Keep items on one row by default but allow wrapping in extreme cases */ flex-wrap: nowrap; margin-bottom: 0.5rem; } .legal-footer .legal-links a { display: inline-flex; align-items: center; justify-content: center; /* Allow buttons to shrink and prevent text wrapping */ flex-shrink: 1; min-width: 0; white-space: nowrap; padding: 6px 14px; border-radius: 8px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-color); text-decoration: none; position: relative; overflow: hidden; } /* Reduce padding and font size on very narrow screens so all footer links fit on one line */ @media (max-width: 600px) { .legal-footer .legal-links { gap: 0.25rem; } .legal-footer .legal-links a { padding: 4px 8px; font-size: 0.8rem; } } /* Always show the animated rainbow border on footer links */ /* Only animate the rainbow border on hover for footer links. By default the pseudo‑element remains invisible; when hovering it will be animated via the global .rainbow-border:hover rule. */ .legal-footer .legal-links a.rainbow-border::before { opacity: 0; animation: rainbowShift 4s linear infinite; } /* ----------------------------------------------------------------------- * Rubric table styling * * The rubric designer outputs an HTML table so that generated rubrics * are easy to print and reuse. Apply a light glass backdrop and * subtle borders to each cell. Table headers are distinguished by a * slight tint. * ---------------------------------------------------------------------*/ .rubric-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .rubric-table th, .rubric-table td { border: 1px solid var(--glass-border); padding: 0.5rem; text-align: left; vertical-align: top; } .rubric-table th { background: var(--glass-bg); font-weight: 600; } /* === Unified Sidebar Overlay (centred buttons) =========================== This replaces scattered sidebar/overlay rules with a single, predictable set. The sidebar now behaves like a fullscreen overlay that centers its buttons. Toggle visibility by adding/removing the `.active` class via app.js. ===========================================================================*/ .sidebar { position: fixed; inset: 0; display: none; /* hidden by default */ align-items: center; /* vertical center */ justify-content: center; /* horizontal center */ background: rgba(60, 50, 60, 0.2); /* glassy dim background */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; padding: 24px; } .sidebar.active { display: flex; } .sidebar ul { list-style: none; margin: 0; padding: 0; /* Display the navigation items in a responsive grid. Using auto‑fit with a minimum size allows the list to wrap into two columns on larger screens while falling back to a single column on very small viewports. */ display: grid; /* Use a responsive grid for the overlay navigation. On small screens the navigation collapses into a single column, while larger viewports show two columns so more items fit without excessive scrolling. */ grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 12px; align-items: start; justify-items: stretch; max-height: 80vh; overflow: auto; } /* Force a two‑column layout for the sidebar navigation on medium and larger screens. This improves visual balance and allows more buttons to be shown at once. On very narrow screens we fall back to the auto-fit behaviour defined above, which will stack items into a single column as needed. */ @media (min-width: 600px) { .sidebar ul { grid-template-columns: repeat(2, minmax(240px, 1fr)); } } .sidebar a { contain: layout paint; /* isolate layout for scramble animation */ display: inline-flex; align-items: center; justify-content: center; /* Let anchors expand to fill the grid cell rather than enforcing a fixed minimum width. This enables a tidy two‑column layout. */ width: 100%; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; white-space: nowrap; background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.10); color: var(--text-color); transition: transform 0.15s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .sidebar a:hover { transform: translateY(-1px); background: var(--highlight-color); border-color: var(--highlight-color); color: var(--bg-color); } .sidebar a.active { background: var(--primary-color); border-color: var(--primary-color); color: var(--bg-color); } @media (max-width: 480px) { /* On very small screens reduce padding but allow anchors to fill the available space. Removing a fixed min-width ensures the responsive grid continues to wrap gracefully. */ .sidebar a { contain: layout paint; /* isolate layout for scramble animation */ padding: 10px 16px; width: 100%; } } /* When the sidebar is open, prevent background scrolling */ body.sidebar-open { overflow: hidden; } /* Close button for sidebar overlay */ .sidebar .sidebar-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: var(--text-color); font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; } .sidebar .sidebar-close:hover { background: rgba(255,255,255,0.14); } .sidebar .sidebar-close:active { transform: scale(0.98); } /* Ensure stable text layout inside sidebar buttons */ .sidebar a .label { display: block; text-align: center; pointer-events: none; } @media (max-width: 700px) { .sidebar ul { grid-template-columns: 1fr; } } /* === Polished three-dot overlay menu ===================================== */ .overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10, 2, 28, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; padding: 24px; } .overlay.active { display: flex; } .overlay .overlay-content { position: relative; width: min(720px, 92vw); border-radius: 24px; padding: 28px 28px 28px; background: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,0.08), transparent 60%), linear-gradient( to bottom right, rgba(255,255,255,0.12), rgba(255,255,255,0.06) ); box-shadow: 0 10px 35px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.16); color: var(--text-color); } .overlay .close-btn { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: var(--text-color); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s ease, transform .1s ease; } .overlay .close-btn:hover { background: rgba(255,255,255,0.14); } .overlay .close-btn:active { transform: scale(0.98); } /* Link grid */ .overlay .overlay-content ul { list-style: none; margin: 0 0 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 24px; } .overlay .overlay-content li a { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.10); color: var(--text-color); transition: transform .15s ease, background .25s ease, color .25s ease, border-color .25s ease; } .overlay .overlay-content li a:hover { transform: translateY(-1px); background: var(--highlight-color); border-color: var(--highlight-color); color: var(--bg-color); } /* API key form + controls */ .overlay .api-key-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-top: 8px; } .overlay .api-key-form label { grid-column: 1 / -1; font-weight: 600; opacity: .85; } .overlay .api-key-form input[type="password"] { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.25); color: var(--text-color); } .overlay .api-key-form button, #themeToggle { padding: 10px 14px; border-radius: 12px; width: 100%; border: 1px solid rgba(255,255,255,0.25); background: var(--primary-color); color: var(--bg-color); font-weight: 600; cursor: pointer; transition: transform .15s ease, filter .2s ease; display: block; margin: 16px auto; } .overlay .api-key-form button:hover, #themeToggle:hover { filter: brightness(1.06); transform: translateY(-1px); } @media (max-width: 640px) { .overlay .overlay-content ul { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .overlay .api-key-form { grid-template-columns: 1fr; } } /* ======================================================================== */ /* [AUTO-INJECT] glossy button styles */ /* Reuse the site's liquid-glass feel for buttons without disturbing base .btn styles */ .btn.liquid-glass { background: rgba(255,250,255,0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,0.35); box-shadow: 3px 3px 3px rgba(100,0,150,0.15), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease; } .btn.liquid-glass:hover { background: rgba(255,255,255,0.24); box-shadow: 0 8px 8px rgba(200,0,250,0.16), inset 0 1px 0 rgba(255,255,255,0.3); } .btn.liquid-glass:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.2); } .btn.liquid-glass:focus { outline: none; box-shadow: 0 0 0 3px rgba(100, 150, 255, 0.25), 0 6px 18px rgba(0,0,0,0.12); } /* Ensure the primary glass button text remains legible on both light/dark themes */ .btn.btn-primary.liquid-glass { color: var(--btn-primary-fg, #111); } /* --- Soft rainbow glow effect on hover for glossy pickers --- */ .glossy-subject-picker:hover, .glossy-grade-picker:hover { position: relative; z-index: 1; } .glossy-subject-picker:hover::before, .glossy-grade-picker:hover::before { content: ""; position: absolute; inset: -2px; /* slight halo outside the button bounds */ border-radius: inherit; padding: 2px; background: linear-gradient(90deg, #ff0000, #ff9a00, #d0de21, #4fdc4a, #3fdad8, #2fc9e2, #1c7fee, #5f15f2, #ba0cf8, #fb07d9, #ff0000 ); background-size: 200% 200%; filter: blur(50px) brightness(25.25); /* soften into a glow */ /* Show only the border ring, keep center transparent */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: rainbowShift 4s linear infinite; } @keyframes rainbowShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* === Light theme visibility fixes (2025-08-19 updated) =========================== */ /* Make the page overlay veil clearer but based on dark bg with low opacity */ [data-theme="light"] .overlay { background: rgba(11, 6, 41, 0.10); /* --bg-color (#0b0629) with 0.1 opacity */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Ensure the '...' (vertical ellipsis) trigger is clearly visible in light mode, with accent outline */ [data-theme="light"] header #openOverlay { -webkit-text-stroke: 1px var(--primary-color); text-shadow: 0 0 2px var(--primary-color); font-weight: 700; } [data-theme="light"] header #openOverlay:hover, [data-theme="light"] header #openOverlay:focus { -webkit-text-stroke: 1px var(--primary-color); text-shadow: 0 0 2px rgba(214,55,179,0.35), 0 0 10px rgba(214,55,179,0.18); outline: none; } /* Keep good contrast for overlay list items in light mode */ [data-theme="light"] .overlay-content { background: rgba(255,250,255,0.15); color: var(--text-color); box-shadow: 0 10px 30px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.06); } [data-theme="light"] .overlay-content li a { background: rgba(255,255,255,0.15); border-color: rgba(0,0,0,0.08); } [data-theme="light"] .overlay-content li a:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: #1c1735; } /* ======================================================================== */ /* --- Fix: Ensure Grade/Subject picker buttons use correct text colors --- */ [data-theme="light"] .btn.liquid-glass.glossy-subject-picker, [data-theme="light"] .btn.liquid-glass.hover-rainbow-rainbow { color: #000 !important; /* black text in light mode */ } [data-theme="dark"] .btn.liquid-glass.glossy-subject-picker, [data-theme="dark"] .btn.liquid-glass.hover-rainbow-rainbow { color: #fff !important; /* white text in dark mode */ } /* Picker buttons: correct foreground per theme */ .btn.liquid-glass.glossy-subject-picker, .btn.liquid-glass.hover-rainbow-rainbow { color: var(--picker-fg) !important; } /* Country + Region dual button row */ .dual-button-row { display:flex; gap:.5rem; flex-wrap:wrap; } .dual-button-row .btn { padding:1rem; font-size:1rem; } .dual-button-row .main-country, .dual-button-row .region-btn { flex: 1 1 0; min-width: 14rem; } .dual-button-row .region-btn { display:none; } @media (max-width: 768px) { .dual-button-row .main-country, .dual-button-row .region-btn { flex: 1 1 100%; min-width: 0; } } /* Generic glossy picker style (alias of subject/grade glossy effect) */ .glossy-picker:hover { position: relative; z-index: 1; } .glossy-picker:hover::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, #ff0000, #ff7a00, #ffee00, #00d084, #0096ff, #8a2be2, #ff00c8, #ff0000); background-size: 200% 200%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: rainbowShift 4s linear infinite; } /* Ensure key action buttons use correct text color in light/dark modes */ [data-theme="light"] .btn.liquid-glass, [data-theme="light"] .btn.liquid-glass.glossy-picker { color: #111 !important; } [data-theme="dark"] .btn.liquid-glass, [data-theme="dark"] .btn.liquid-glass.glossy-picker { color: #fff !important; } /* Force readable button text based on theme */ [data-theme="light"] .btn.theme-contrast { color: #111 !important; } [data-theme="dark"] .btn.theme-contrast { color: #fff !important; } /* Improved theme-contrast for buttons */ [data-theme="light"] .btn.theme-contrast { color: #000 !important; } [data-theme="dark"] .btn.theme-contrast { color: #fff !important; } /* Ensure strong specificity for dark mode readable text on key buttons */ :root[data-theme="dark"] .btn.theme-contrast, [data-theme="dark"] .btn.theme-contrast, :root[data-theme="dark"] .btn.btn-primary.theme-contrast, [data-theme="dark"] .btn.btn-secondary.theme-contrast, [data-theme="dark"] .mp-trigger.theme-contrast { color: #fff !important; } :root[data-theme="light"] .btn.theme-contrast, [data-theme="light"] .btn.theme-contrast, :root[data-theme="light"] .btn.btn-primary.theme-contrast, [data-theme="light"] .btn.btn-secondary.theme-contrast, [data-theme="light"] .mp-trigger.theme-contrast { color: #111 !important; } /* Ultra-specific overrides for key actions in dark mode */ [data-theme="dark"] #generateAwardBtn, [data-theme="dark"] #downloadAwardsBtn, [data-theme="dark"] .glossy-format-picker { color: #fff !important; } /* Fallback: ensure any .gp-item (picker options) remain legible */ [data-theme="dark"] .gp-item { color: var(--text-color, #fff) !important; } /* Center button label text */ .btn, .btn.theme-contrast, .btn.glossy-format-picker { text-align: center; justify-content: center; } /* Center fill-in-the-blank inserted text */ .fill-blank-input, .fill-blank, input.fill-blank, textarea.fill-blank { text-align: center; } /* Center button labels globally */ .btn { text-align: center; } /* Center text in common "fill in the blank" inputs and textareas */ .form-group input[type="text"], .form-group input[type="search"], .form-group input[type="email"], .form-group input[type="url"], .form-group input[type="number"], .form-group textarea { text-align: center; } .form-group input::placeholder, .form-group textarea::placeholder { text-align: center; } /* Ensure Generate / Download action buttons keep centered text even if flex added elsewhere */ .btn.btn-primary, .btn.btn-secondary, .btn.btn-outline { justify-content: center; } /* Center body text labels (Topic, Country, etc.) */ .form-group label, .form-group .form-label, label { text-align: center; display: block; width: 100%; } /* Also center body content text in general paragraphs within main tool body */ /* * By default our previous design centred all text within the main * content area. This made everything – paragraphs, lists and * headings – sit in the middle of the page. Per the latest * branding guidelines we want the body copy to remain left aligned * while the container itself is centred on the page. The only * exception should be specific sections (like How it Works) and * button groups which remain centred. To accomplish this we * override the global centring rule here. See additional rules * below for elements that should remain centred. */ main, .container, .content, body { text-align: left; } /* Keep the How it Works section centred. It uses a flex layout internally so explicitly centring the text maintains the visual rhythm for the numbered steps. */ section.how-it-works, .how-it-works { text-align: center; } /* === Output alignment overrides (auto-injected) === */ #quickOutput, #quizOutput, #rubricOutput, #planOutput, #unitOutput, #wsOutput, #awardOutput, #automationOutput { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; display: block !important; max-width: 100% !important; white-space: pre-wrap !important; align-self: stretch !important; /* if inside a flex container */ justify-self: stretch !important; /* if inside a grid container */ } /* === Output width shrink (auto-injected) === */ #quickOutput, #quizOutput, #rubricOutput, #planOutput, #unitOutput, #wsOutput, #awardOutput, #automationOutput { max-width: 80% !important; /* shrink to 80% of container */ margin-left: auto !important; margin-right: auto !important; } /* --- Custom Centering for Generate, Clear, Format, and Download Buttons --- */ #generateBtn, #generateNextBtn, #generateUnitBtn, #generateWSBtn, #generateQuickBtn, #clearLessonsBtn, #clearAllBtn, #downloadBtn, #downloadUnitBtn, #downloadWSBtn, #downloadQuickBtn, .glossy-format-picker { display: block !important; margin: 1rem auto !important; text-align: center !important; } /* === Centering tweaks added by ChatGPT on 2025-08-20 === */ /* Center generate buttons */ #generateBtn, #generateUnitBtn, #generateWSBtn, #generateQuickBtn { display: block; margin: 0.75rem auto; text-align: center; } /* Center the Clear buttons group */ .button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; } /* Ensure Choose Format + Download rows are centered consistently */ .download-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; } /* In case some pages use a form-actions wrapper */ .form-actions { text-align: center; } /* === Spacing fix for download row (2025-08-20) === */ /* Avoid auto margins pushing buttons apart inside flex rows */ .download-row .btn { margin: 0.25rem 0.4rem; } .download-row #downloadBtn, .download-row #downloadUnitBtn, .download-row #downloadWSBtn, .download-row #downloadQuickBtn, .download-row .glossy-format-picker { margin-left: 0; margin-right: 0; } /* Ensure buttons don't stretch full width in download row */ .download-row .btn, .download-row button { width: auto; } /* === Tighten layout for download row (adjacent controls) === */ .download-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; } /* Reset any auto margins or block centering that might be applied globally */ .download-row > * { margin-left: 0 !important; margin-right: 0 !important; } /* Ensure the injected standalone button participates like a normal inline-flex button */ #standaloneDownloadBtn { display: inline-flex !important; margin-left: 0 !important; margin-right: 0 !important; } /* ------------------------------------------------------------------- * Auto Download toggle styling * * Each tool page will include a small Auto DL checkbox that triggers * automatic downloads after content generation. The toggle is * presented as a compact glassy button with a checkbox and label. It * participates in the same flex layout as the other buttons within the * download row and gracefully wraps on small screens. These rules * define the layout and spacing for the toggle while reusing the * existing liquid‑glass styling applied via the `.btn` and * `.liquid-glass` classes. Adjust the padding to keep the control * compact and ensure the checkbox does not stretch the row. */ .auto-dl-container { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; cursor: pointer; user-select: none; /* Allow the container to inherit the glass styling from utility classes like .btn and .liquid-glass. */ } .auto-dl-container input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: currentColor; } /* === Theme-aware button text colours and picker transparency (2025-08-20) === */ /* * The original styles rendered the primary and secondary buttons with a fixed * foreground colour. In dark mode this resulted in hard‑to‑read black * labels on coloured backgrounds. Define CSS variables to control the * foreground colours for buttons and assign appropriate values for both * dark and light themes. When these variables are present the * underlying .btn selectors will use them and remain legible. */ :root { /* Default button foreground colours for dark mode */ --btn-primary-fg: #ffffff; --btn-secondary-fg: #ffffff; --btn-glass-fg: #ffffff; } [data-theme="light"] { /* Override button foregrounds for light mode */ --btn-primary-fg: #000000; --btn-secondary-fg: #000000; --btn-glass-fg: #000000; } /* Apply the theme‑aware foreground colours to primary and secondary buttons. Use !important to ensure these colours take precedence over existing rules. */ .btn.btn-primary { color: var(--btn-primary-fg) !important; } .btn.btn-secondary { color: var(--btn-secondary-fg) !important; } /* Ensure liquid‑glass buttons pick up the glass‑specific foreground colour */ .btn.liquid-glass { color: var(--btn-glass-fg) !important; } /* Slightly brighten primary and secondary button backgrounds in dark mode. The default colours were too sombre on the dark canvas, making the “generate” and related buttons feel flat. These overrides apply only in dark mode and gently lift the base tone. */ [data-theme="dark"] .btn.btn-primary { background: linear-gradient(0deg, #d45cc7, var(--primary-color)); } [data-theme="dark"] .btn.btn-secondary { background: linear-gradient(0deg, #e98bd6, var(--highlight-color)); } [data-theme="dark"] .btn.btn-primary:hover { background: linear-gradient(0deg, #dd6cd0, var(--primary-color)); filter: brightness(1.1); } [data-theme="dark"] .btn.btn-secondary:hover { background: linear-gradient(0deg, #f197de, var(--highlight-color)); filter: brightness(1.1); } /* Darken the glassy picker backgrounds in dark mode for a stronger, more transparent look. Reducing the alpha values creates a more pronounced “glass” effect that lets the underlying page colour show through. */ [data-theme="dark"] .btn.liquid-glass.glossy-grade-picker, [data-theme="dark"] .btn.liquid-glass.glossy-subject-picker, [data-theme="dark"] .btn.liquid-glass.glossy-framework-picker, [data-theme="dark"] .btn.liquid-glass.glossy-country-picker, [data-theme="dark"] .btn.liquid-glass.glossy-diff-picker { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .btn.liquid-glass.glossy-grade-picker:hover, [data-theme="dark"] .btn.liquid-glass.glossy-subject-picker:hover, [data-theme="dark"] .btn.liquid-glass.glossy-framework-picker:hover, [data-theme="dark"] .btn.liquid-glass.glossy-country-picker:hover, [data-theme="dark"] .btn.liquid-glass.glossy-diff-picker:hover { background: rgba(255, 255, 255, 0.12) !important; } /* In light mode the glass pickers should remain softly translucent. Use slightly higher alpha values so the controls stand out on the pale backgrounds. */ [data-theme="light"] .btn.liquid-glass.glossy-grade-picker, [data-theme="light"] .btn.liquid-glass.glossy-subject-picker, [data-theme="light"] .btn.liquid-glass.glossy-framework-picker, [data-theme="light"] .btn.liquid-glass.glossy-country-picker, [data-theme="light"] .btn.liquid-glass.glossy-diff-picker { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(0, 0, 0, 0.25) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .btn.liquid-glass.glossy-grade-picker:hover, [data-theme="light"] .btn.liquid-glass.glossy-subject-picker:hover, [data-theme="light"] .btn.liquid-glass.glossy-framework-picker:hover, [data-theme="light"] .btn.liquid-glass.glossy-country-picker:hover, [data-theme="light"] .btn.liquid-glass.glossy-diff-picker:hover { background: rgba(255, 255, 255, 0.85) !important; } /* === Rainbow glow for generate buttons (2025-08-20) === */ /* * To inject a subtle sense of excitement into the primary generate * buttons we wrap them with a faint rainbow halo. The halo grows * brighter and more pronounced on hover. This effect uses a * pseudo‑element that renders a multi‑colour gradient behind the * button but clipped to show only a thin border. The glow is * intentionally subdued by default and intensifies slightly on hover. */ #generateBtn, #generateNextBtn, #generateUnitBtn, #generateWSBtn, #generateQuickBtn, #generateQuizBtn, #generateAwardBtn, #generateRubricBtn, #generateAutomationBtn { position: relative; overflow: hidden; } #generateBtn::after, #generateNextBtn::after, #generateUnitBtn::after, #generateWSBtn::after, #generateQuickBtn::after, #generateQuizBtn::after, #generateAwardBtn::after, #generateRubricBtn::after, #generateAutomationBtn::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, #ff004c, #ff7a00, #ffeb00, #33ff00, #00e5ff, #6b00ff, #ff00e5, #ff004c); background-size: 300% 300%; filter: blur(28px) brightness(1.1); /* Create a hollow centre so only a halo appears around the button */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.25; transition: opacity 0.3s ease, filter 0.3s ease; } #generateBtn:hover::after, #generateNextBtn:hover::after, #generateUnitBtn:hover::after, #generateWSBtn:hover::after, #generateQuickBtn:hover::after, #generateQuizBtn:hover::after, #generateAwardBtn:hover::after, #generateRubricBtn:hover::after, #generateAutomationBtn:hover::after { opacity: 0.7; filter: blur(36px) brightness(1.5); } /* Strengthen glass effect on the grade/subject/framework/country/differentiation pickers. These buttons use the “hover-rainbow-rainbow” helper class and should appear darker and more translucent in dark mode while staying bright enough in light mode. */ [data-theme="dark"] .btn.liquid-glass.hover-rainbow-rainbow { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .btn.liquid-glass.hover-rainbow-rainbow:hover { background: rgba(255, 255, 255, 0.12) !important; } [data-theme="light"] .btn.liquid-glass.hover-rainbow-rainbow { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(0, 0, 0, 0.25) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .btn.liquid-glass.hover-rainbow-rainbow:hover { background: rgba(255, 255, 255, 0.85) !important; } /* === Layout fix for lesson planner generate buttons === */ /* Force Generate Plan + Generate Next to remain on the same line */ .primary-row {"/* container (if this selects the button, the flex will apply at button level) */"} .primary-row {"display:flex; flex-wrap:nowrap; gap:8px;"} .primary-row > #generateBtn, .primary-row > #generateNextBtn {"flex:1 1 0%; min-width:0;"} /* As a fallback, if CSS specificity fights us, apply directly to the buttons */ #generateBtn, #generateNextBtn { display:inline-flex; width: auto; } /* === CTA hero button refinements (no underline, larger size, rainbow halo like Generate button) === */ a.btn, a.btn:hover, a.btn:focus { text-decoration: none; } .btn-hero { font-size: 1.625rem; /* larger text */ padding: 14px 18px; /* bigger click target */ border-radius: 10px; /* slightly rounder for hero */ } /* Reuse the same rainbow halo effect used on #generate* buttons */ .cta-rainbow-halo { position: relative; } .cta-rainbow-halo::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; padding: 5px; background: linear-gradient(90deg, #ff004c, #ff7a00, #ffeb00, #33ff00, #00e5ff, #6b00ff, #ff00e5, #ff004c); background-size: 300% 300%; filter: blur(28px) brightness(1.1); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.25; transition: opacity .3s ease, filter .3s ease; } .cta-rainbow-halo:hover::after { opacity: 0.7; filter: blur(36px) brightness(1.5); } /* CTA spacing helpers */ .cta-break { display:block; line-height: 1rem; content:""; } /* tighten whitespace below hero section overall */ section.hero { margin-bottom: 0.5rem; } section.why-choose { margin-top: 0.5rem; } /* === Reusable bouncy divider (short version) === */ .bouncy-divider { display: block; width: 4px; height: 28px; /* reduced height for a subtle divider */ margin: 0.75rem auto; /* center horizontally, small vertical spacing */ border-radius: 2px; background: var(--primary-color); animation: hero-bounce 2s ease-in-out infinite; } /* Spaced variant to avoid overlap with preceding buttons */ .bouncy-divider--spaced { margin-top: 1.25rem; } /* Lowered variant for the divider below 'How it works' */ .bouncy-divider--lower { margin-top: 2rem; } /* Pill shape for hero CTAs */ Jpx; } /* Mobile adjustments for hero CTAs */ @media (max-width: 640px) { .btn-hero { font-size: 1rem; padding: 12px 20px; } } /* Optional stack helper (not required if inline gap applied) */ .cta-stack { display:flex; flex-direction:column; gap:0.6rem; } /* Hero-specific divider spacing */ .bouncy-divider--hero { margin: 0.75rem auto 0.5rem; height: 70px; } /* Reposition hero bouncing line below the Standards-ready sentence */ .hero h1::after { content: none !important; } .hero p:first-of-type::after { content: ''; display: block; width: 4px; height: 70px; margin: 1.2rem auto 0; border-radius: 2px; background: var(--primary-color); animation: hero-bounce 2s ease-in-out infinite; } /* force-disable hero lines */ .hero h1::after { content: none !important; } .hero p:first-of-type::after { content: none !important; } /* Expand clickable area for clickable bouncy dividers */ .bouncy-divider[data-scroll-target] { position: relative; cursor: pointer; } .bouncy-divider[data-scroll-target]::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 48px; /* wider horizontal hit area */ height: calc(100% + 16px); /* small vertical forgiveness */ top: -8px; border-radius: 24px; background: transparent; pointer-events: auto; } @media (max-width: 640px) { .bouncy-divider[data-scroll-target]::before { width: 56px; height: calc(100% + 20px); top: -10px; } } /* === Clickable divider visual feedback (subtle glow) === */ /* Use currentColor to derive glow from --primary-color without hardcoding alpha */ .bouncy-divider[data-scroll-target] { color: var(--primary-color); } .bouncy-divider[data-scroll-target]::before { transition: box-shadow .25s ease, background .25s ease, opacity .25s ease; } .bouncy-divider[data-scroll-target]:hover::before, .bouncy-divider[data-scroll-target]:focus-visible::before { box-shadow: 0 0 2px 4px rgba(200,0,250,0.3); opacity: 0.2; } @keyframes divider-press-glow { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.4; } 100% { box-shadow: 0 0 0 24px rgba(0,0,0,0); opacity: 0; } } .bouncy-divider[data-scroll-target].is-triggering::before { animation: divider-press-glow 600ms ease-out; } /* Keyboard focus ring for accessibility */ .bouncy-divider[data-scroll-target]:focus-visible::before { outline: none; } /* PAYWALL MOBILE FIXES */ @media (max-width: 600px) { .paywall-modal { width: 100%; max-width: 100%; border-radius: 12px; padding: 16px; box-sizing: border-box; } .paywall input[type="password"], .paywall button#unlockBtn { width: 100%; } .paypal-tiers { max-height: 50vh; } } /* PAYPAL TIER LAYOUT: two columns + shrink to fit */ .paypal-tiers { grid-auto-rows: 1fr; align-items: stretch; } .paypal-tier { min-width: 0; word-break: break-word; padding: clamp(8px, 2.5vw, 16px); border-radius: 10px; backdrop-filter: blur(8px) saturate(140%); } .paywall-modal h2 { font-size: clamp(1.05rem, 3.8vw, 1.35rem); } .paypal-tier h3 { font-size: clamp(0.95rem, 3.6vw, 1.15rem); margin-bottom: 0.25rem; } .paypal-tier .tier-desc { font-size: clamp(0.85rem, 3.2vw, 1rem); line-height: 1.3; margin-bottom: 0.5rem; } @media (max-width: 380px) { .paypal-tiers { gap: 8px; } .paywall-modal { padding: 12px; } } /* --- Tier Comparison Section --- */ #tier-comparison { margin: 64px auto; max-width: 1100px; padding: 16px; } .tier-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 16px; background: rgba(255,255,255,0.06); backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 4px 30px rgba(0,0,0,0.3); } .tier-table thead th { padding: 18px 12px; text-align: center; font-size: clamp(0.95rem, 1.8vw, 1.1rem); background: rgba(255,255,255,0.08); } .tier-table tbody td { padding: 14px 12px; vertical-align: top; border-top: 1px solid rgba(255,255,255,0.12); font-size: clamp(0.9rem, 1.6vw, 1rem); } .tier-table .price { font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.3rem); } .tier-table .muted { opacity: 0.85; } .tier-table .save-pill { display: inline-block; margin-top: 6px; padding: 4px 8px; border-radius: 999px; background: var(--primary-color) !important; color: #fff !important; border: 0 !important; font-size: 0.85em; white-space: nowrap; } @media (max-width: 700px) { .tier-table thead { display: none; } .tier-table, .tier-table tbody, .tier-table tr, .tier-table td { display: block; width: 100%; } .tier-table tr { border-bottom: 1px solid rgba(255,255,255,0.12); padding: 10px 8px; } .tier-table td { border: none; padding: 6px 0; } .tier-table td::before { content: attr(data-label); display: block; font-weight: 600; margin-bottom: 2px; opacity: 0.85; } } /* Make subscribe buttons fit cleanly across containers */ .subscribe-link-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; white-space: normal; word-break: break-word; padding: clamp(10px, 1.8vw, 14px) clamp(12px, 2vw, 16px); border-radius: 12px; margin-top: 8px; } /* Bouncing separators */ .bounce-separator { position: relative; height: 42px; margin: 12px 0 20px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .bounce-separator .line { width: 86%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--primary-color) 50%, transparent 100%); position: absolute; top: 50%; transform: translateY(-50%); } .bounce-separator .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary-color); animation: bounceHoriz 1.6s ease-in-out infinite; box-shadow: 0 0 10px var(--primary-color); } @keyframes bounceHoriz { 0% { transform: translateX(-40%); opacity: 0.5; } 50% { transform: translateX(40%); opacity: 1; } 100% { transform: translateX(-40%); opacity: 0.5; } } /* Ensure the overlay email input is transparent in all themes */ #overlayMenu #overlayEmailLoginForm input[type="email"], .overlay .overlay-content #overlayEmailLoginForm input[type="email"], #overlayEmailInput { background: transparent !important; background-color: transparent !important; color: var(--text-color); } /* Ensure Contact links are readable in dark mode */ :root[data-theme='dark'] a[href="contact.html"].rainbow-border, :root[data-theme='dark'] .legal-links a[href="contact.html"], @media (prefers-color-scheme: dark) { a[href="contact.html"].rainbow-border, .legal-links a[href="contact.html"] { color: #fff !important; } } /* Contact page layout: match standard main content width and scale nicely */ .contact-form { display: block; width: min(100%, 900px); margin: 0 auto; padding: clamp(12px, 2vw, 20px); } .contact-form .form-group { margin-bottom: 12px; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { display: block; width: 100%; } .contact-form textarea { min-height: 160px; } /* Make any Contact Us links/buttons to contact.html clearly readable in dark mode */ :root[data-theme="dark"] a[href="contact.html"], :root[data-theme="dark"] a.btn[href="contact.html"], @media (prefers-color-scheme: dark) { a[href="contact.html"], a.btn[href="contact.html"] { color: #fff !important; } } /* Lesson planner day cards */ .plan-day { padding: 1rem; border: 1px solid var(--glass-border); border-radius: 8px; margin-bottom: 0.75rem; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); overflow-wrap: break-word; } /* -------------------------------------------------------------------- * Custom layout refinements for GetBackToTeaching homepage * * These styles tighten up spacing and align content in the "Why teachers * choose" and "Our Tools" sections, centre the tier comparison headings, * and adjust the overlay buttons. They also introduce classes used to * restructure the index page into discrete cards for each benefit and tool. */ /* Centre the Tier Comparison heading and description */ #tier-comparison h2, #tier-comparison p { text-align: center; } /* Centre the tier table horizontally */ .tier-table { margin-left: auto; margin-right: auto; } /* Layout for the Why Choose section */ .why-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 1rem; } .why-item { max-width: 260px; text-align: center; } .why-item h3 { font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: bold; } .why-item p { margin: 0; } /* Layout for the Tools section */ .tools { text-align: center; } .tools ul { list-style: none; padding-left: 0; } .tools li { margin-bottom: 6px; text-align: center; } .tools li h3 { font-weight: bold; margin-bottom: 0.25rem; } .tools li p { margin: 0 auto 0.5rem; } /* Ensure overlay buttons are centered within the menu */ .overlay-content .btn { display: block; margin: 1rem auto 0; } /* ===== Overlay spacing + header tweaks (2025-08-28) ===== */ .overlay .overlay-content { padding-top: 50px !important; } /* Put Theme Toggle beside the "X" (to its left) */ .overlay #themeToggle { position: absolute !important; top: 16px !important; right: 72px !important; /* 40px X + gap */ margin: 0 !important; display: inline-flex !important; align-items: center; height: 36px; /* visually align with 40px close button */ padding: 6px 10px; font-size: 14px; } /* Bring the list of buttons up under the header row */ .overlay .overlay-content ul { margin-top: 8px !important; }