/* ==========================================================================
iLetrasBonitas — PREMIUM ANIMATED REDESIGN (v3)
Complete replacement stylesheet. To use it, point the page's stylesheet
link at this file instead of style.css. No class or data attribute from
the existing pages was renamed; this file styles exactly the classes the
pages and converter.js already emit.
DIRECTION: deep ink-navy header + hero, vivid violet → fuchsia → amber
gradient accent, clean light cards on a pale lavender-white page.
Clearly different from the old purple/pink look.
PALETTE (exact hex):
--navy #12123A deep ink-navy (header, hero, footer accents)
--navy-2 #1E1E55 hero gradient end / active buttons
--violet #7C3AED gradient start
--fuchsia #D946EF gradient middle
--amber #F59E0B gradient end / focus + current-page accent
--ink #23233F body text
--muted #5F5B7A secondary text
--bg #F7F7FE page background (pale lavender-white)
--card #FFFFFF cards
--line #E6E3F5 borders
--lav #EFEDFB tinted fills (table headers, tags)
TYPOGRAPHY (Google Fonts, display=swap):
Display / headings / logo: "Fredoka" (500, 600, 700)
Body / UI: "Nunito" (400, 600, 700, 800)
Combined stylesheet URL:
https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap
Add these two lines to the page BEFORE the stylesheet link
(CSS cannot preconnect on its own):
If the fonts fail to load, the system-ui fallback stack below applies.
ANIMATIONS — CSS only, keyframes use transform and opacity only:
1. heroDrift — animated gradient wash inside the hero (pseudo-element)
2. cardIn — staggered card entrance (nth-child delays, § results)
3. flashRing — copy-success pulse ring on .style-card.flash
4. starPop — favourite star pop on .fav-btn tap/press
5. shimmerSweep — CSS-only shimmer sweep across .logo-mark (see snippet)
6. sparkTwinkle — sparkle twinkle on .logo-spark inside the logo SVG
Plus transform/opacity transitions: card lift + glow, tab indicator
(scaleX), buttons, toast slide/fade. No JS libraries, no images,
no background images — the hero gradient is pure CSS gradients.
NEW CLASSES introduced here (used ONLY in assets/img/logo-snippet.html):
.logo-mark, .logo-letras, .logo-bonitas, .logo-spark
Every other selector below matches a class already present in the pages
or emitted by converter.js (.style-card, .copy-btn, .png-btn, .fav-btn,
.recent-chip, .flash, .show, .active, .toggle, .primary, .skip, .faq).
========================================================================== */
:root {
--navy: #12123A;
--navy-2: #1E1E55;
--violet: #7C3AED;
--fuchsia: #D946EF;
--amber: #F59E0B;
--ink: #23233F;
--muted: #5F5B7A;
--bg: #F7F7FE;
--card: #FFFFFF;
--line: #E6E3F5;
--lav: #EFEDFB;
--radius: 18px;
--gradient: linear-gradient(120deg, #7C3AED 0%, #D946EF 52%, #F59E0B 100%);
--font-display: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
/* Safety net only: overflow-x: clip on html/body never substitutes for
the root-cause fixes below (flex min-width, aligned columns, wrapping
foot/tabs/tables). It only stops a stray pixel from creating a page-
wide scrollbar on a phone. */
html, body { overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-body);
background: var(--bg);
color: var(--ink);
line-height: 1.6;
}
a { color: var(--violet); }
a:hover { color: var(--fuchsia); }
:focus-visible {
outline: 3px solid var(--amber);
outline-offset: 2px;
border-radius: 6px;
}
/* --- Skip link (already in the pages) --- */
.skip { position: absolute; left: -9999px; }
.skip:focus {
left: 8px; top: 8px; z-index: 40;
background: var(--card); color: var(--navy);
padding: 8px 12px; border-radius: 999px;
font-weight: 800; text-decoration: none;
}
/* --- Header: premium glass, sticky + smooth (v3.1) ---
Semi-transparent navy + backdrop blur, so content slides softly
underneath while scrolling. Falls back to solid navy where blur
is unsupported. */
.site-header {
position: sticky; top: 0; z-index: 10;
background: rgba(18, 18, 58, .86);
-webkit-backdrop-filter: blur(14px) saturate(1.25);
backdrop-filter: blur(14px) saturate(1.25);
border-bottom: 3px solid transparent;
border-image: var(--gradient) 1;
box-shadow: 0 8px 28px rgba(18, 18, 58, .30);
transition: background .3s ease, box-shadow .3s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header { background: var(--navy); }
}
.header-inner {
max-width: 1024px; margin: 0 auto;
/* Root cause of sideways scrolling: a flex child defaults to
min-width:auto (its content width), so the wide pill nav pushed the
header — and the page — wider than the viewport. */
min-width: 0;
padding: 10px 16px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap;
}
/* --- Logo: base class already in the pages; mark/word classes are snippet-only --- */
.logo {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display);
font-size: 1.35rem; font-weight: 600; line-height: 1;
color: #FFFFFF; text-decoration: none; white-space: nowrap;
}
.logo:hover { color: #FFFFFF; }
.logo-mark {
position: relative; display: inline-block; overflow: hidden;
line-height: 0; border-radius: 8px; flex: 0 0 auto;
filter: drop-shadow(0 0 10px rgba(217, 70, 239, .45));
transition: filter .3s ease;
}
.logo:hover .logo-mark { filter: drop-shadow(0 0 16px rgba(217, 70, 239, .70)); }
.logo-mark svg { display: block; width: 2.1em; height: 2.1em; }
.logo-mark::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
opacity: 0; transform: translateX(-160%) skewX(-18deg);
animation: shimmerSweep 4.5s ease-in-out 1.2s infinite;
pointer-events: none;
}
.logo-spark { transform-box: fill-box; transform-origin: center; animation: sparkTwinkle 2.8s ease-in-out infinite; }
.logo-letras {
font-weight: 700;
background: var(--gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.logo-bonitas { font-weight: 500; color: #E9E7FF; }
.main-nav {
display: flex; align-items: center; gap: 8px; min-width: 0;
flex-wrap: nowrap; overflow-x: auto;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
padding: 2px 0 4px; max-width: 100%;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
text-decoration: none; font-weight: 700; font-size: .88rem; color: #E3E0FB;
padding: 7px 13px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .08);
transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.main-nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.main-nav a[aria-current="page"] {
background: var(--gradient); color: #FFFFFF; border-color: transparent;
box-shadow: 0 4px 14px rgba(217, 70, 239, .45);
}
.nav-sep { width: 1px; align-self: stretch; flex-shrink: 0; background: rgba(255, 255, 255, .22); margin: 4px 2px; }
.nav-group-label {
align-self: center; flex-shrink: 0; white-space: nowrap;
font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
color: #D8D4F5;
}
/* --- Page shell + headings --- */
main { max-width: 1024px; margin: 0 auto; padding: 16px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.25; color: var(--navy); }
h1 { font-size: clamp(1.55rem, 6.5vw, 2.05rem); font-weight: 600; margin: 12px 0 6px; }
h2 { font-size: 1.35rem; font-weight: 600; margin: 28px 0 8px; }
h3 { font-size: 1.08rem; font-weight: 600; margin: 18px 0 6px; }
/* --- Hero: ink-navy panel with an animated gradient wash (v3.1) ---
Hierarchy: eyebrow badge, H1 with one gradient accent word, short
subtext, a compact stats row, then quick chips to the other pages.
Extra bottom padding lets the converter card overlap the hero
slightly (see .converter), visually joining the two. */
.hero {
position: relative; overflow: hidden;
margin: 6px 0 0; padding: 22px 18px 36px;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 70%);
border-radius: 20px; color: #FFFFFF;
box-shadow: 0 14px 34px rgba(18, 18, 58, .28);
}
/* Animated gradient wash: a large gradient layer drifting behind the text.
transform/opacity only, so it stays cheap on mobile. */
.hero::before {
content: ""; position: absolute; inset: -40% -20% auto -20%; height: 180%;
background:
radial-gradient(closest-side at 20% 30%, rgba(124, 58, 237, .75), transparent 70%),
radial-gradient(closest-side at 75% 20%, rgba(217, 70, 239, .65), transparent 70%),
radial-gradient(closest-side at 60% 90%, rgba(245, 158, 11, .55), transparent 70%);
opacity: .8; pointer-events: none;
animation: heroDrift 14s ease-in-out infinite alternate;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #FFFFFF; }
.hero p { color: #D9D6F5; margin: 6px 0; }
.hero-accent {
background: var(--gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.hero-stats {
display: flex; flex-wrap: wrap; gap: 6px 14px;
margin: 14px 0 0 !important; font-size: .92rem; color: #E9E7FF;
}
.hero-stats strong { color: #FFFFFF; font-weight: 800; }
.hero-stats span + span::before { content: "·"; margin-right: 14px; color: #9D97D8; }
.hero-chips {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-top: 16px;
}
.hero-chips-label { font-size: .85rem; font-weight: 800; color: #CFCBF5; }
.hero-chips a {
text-decoration: none; font-size: .85rem; font-weight: 700; color: #FFFFFF;
padding: 6px 12px; border-radius: 999px; white-space: nowrap;
border: 1px solid rgba(255, 255, 255, .28);
background: rgba(255, 255, 255, .12);
transition: background .25s ease, transform .25s ease;
}
.hero-chips a:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.hero-chip-current {
font-size: .85rem; font-weight: 800; color: #FFFFFF;
padding: 6px 12px; border-radius: 999px; white-space: nowrap;
background: var(--gradient); box-shadow: 0 4px 14px rgba(217, 70, 239, .45);
}
.badge {
display: inline-block;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .28);
color: #FFFFFF; border-radius: 999px;
padding: 4px 12px; font-size: .85rem; font-weight: 800;
}
/* --- Converter: clean light card, tool above the fold on mobile ---
Negative top margin pulls it 18px over the hero bottom, joining
hero and tool without adding height above the fold. */
.converter, .hero, .results, .style-card { min-width: 0; max-width: 100%; }
.converter {
position: relative; z-index: 2; margin-top: -18px;
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); padding: 16px;
box-shadow: 0 10px 30px rgba(18, 18, 58, .10);
}
.converter label { font-weight: 800; display: block; margin-bottom: 6px; color: var(--navy); }
.converter textarea {
width: 100%; min-height: 84px; font-size: 1.15rem; font-family: var(--font-body);
padding: 12px; border: 1.5px solid #D8D3F0; border-radius: 12px;
resize: vertical; background: #FFFEFF; color: var(--ink);
transition: border-color .2s ease, transform .2s ease;
}
.converter textarea:focus { outline: 3px solid var(--amber); border-color: var(--violet); }
.tool-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.tool-row .counter { margin-left: auto; font-weight: 800; color: var(--navy); }
button {
cursor: pointer; border-radius: 999px;
border: 1.5px solid var(--violet); background: var(--card);
color: var(--navy); padding: 9px 15px; min-height: 44px;
font-family: var(--font-body); font-weight: 800; font-size: .95rem;
transition: transform .18s ease, opacity .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
button:hover { transform: translateY(-1px); border-color: var(--fuchsia); color: var(--fuchsia); }
button:active { transform: translateY(0) scale(.97); }
button.primary { background: var(--gradient); color: #FFFFFF; border-color: transparent; }
button.primary:hover { color: #FFFFFF; opacity: .92; }
button.active, button[aria-pressed="true"].toggle { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
.warning {
background: #FEF6E0; border: 1px solid #FDE68A; border-radius: 12px;
padding: 10px 12px; margin-top: 10px; font-weight: 700; color: #7A4A00;
}
/* --- Tabs with an animated indicator under the active tab --- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 12px; padding-bottom: 8px; }
.tabs button { position: relative; padding: 7px 13px; min-height: 44px; }
.tabs button.active { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
.tabs button::after {
content: ""; position: absolute; left: 22%; right: 22%; bottom: -6px; height: 4px;
border-radius: 999px; background: var(--gradient);
transform: scaleX(0); opacity: 0;
transition: transform .25s ease, opacity .25s ease;
}
.tabs button.active::after { transform: scaleX(1); opacity: 1; }
/* --- Results grid: 1 column mobile, 2 columns at 640px+ --- */
.results { display: grid; grid-template-columns: 1fr; gap: 12px; }
.style-card {
position: relative; background: var(--card); border: 1px solid var(--line);
border-radius: 16px; padding: 14px 14px 12px; cursor: pointer;
animation: cardIn .45s ease both;
transition: transform .22s ease, border-color .22s ease;
}
/* Staggered entrance: later cards start slightly later. */
.results .style-card:nth-child(1) { animation-delay: 0s; }
.results .style-card:nth-child(2) { animation-delay: .05s; }
.results .style-card:nth-child(3) { animation-delay: .10s; }
.results .style-card:nth-child(4) { animation-delay: .15s; }
.results .style-card:nth-child(5) { animation-delay: .20s; }
.results .style-card:nth-child(6) { animation-delay: .25s; }
.results .style-card:nth-child(7) { animation-delay: .28s; }
.results .style-card:nth-child(8) { animation-delay: .31s; }
.results .style-card:nth-child(9) { animation-delay: .34s; }
.results .style-card:nth-child(10) { animation-delay: .37s; }
.results .style-card:nth-child(11) { animation-delay: .40s; }
.results .style-card:nth-child(n+12) { animation-delay: .42s; }
/* Lift + glow on hover / focus / tap: the glow is a pseudo-element whose
opacity fades in, so the animation itself stays transform/opacity. */
.style-card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
box-shadow: 0 14px 30px rgba(124, 58, 237, .28);
opacity: 0; transition: opacity .22s ease; pointer-events: none;
}
.style-card:hover, .style-card:focus-within { transform: translateY(-4px); border-color: var(--violet); }
.style-card:hover::before, .style-card:focus-within::before { opacity: 1; }
/* Copy-success pulse: a fuchsia ring that expands and fades (transform/opacity). */
.style-card.flash::after {
content: ""; position: absolute; inset: -2px; border-radius: 18px;
border: 3px solid var(--fuchsia); pointer-events: none;
animation: flashRing .7s ease-out forwards;
}
.style-name { display: block; font-weight: 800; color: var(--navy); }
.style-output { display: block; font-size: 1.35rem; word-break: break-word; overflow-wrap: anywhere; padding: 10px 0; min-height: 44px; }
.style-tag {
display: inline-block; background: var(--lav); color: var(--navy);
font-size: .78rem; font-weight: 800; border-radius: 999px; padding: 2px 9px;
}
.card-foot { display: flex; align-items: center; gap: 6px; }
.card-foot .style-tag { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-foot .copy-btn, .card-foot .png-btn { flex-shrink: 0; float: none; margin-right: 0; }
.copy-btn { float: right; }
.png-btn { float: right; margin-right: 6px; }
.fav-btn {
position: absolute; top: 8px; right: 12px; z-index: 2;
border: none; background: none; min-height: 0; padding: 4px;
font-size: 1.4rem; color: var(--fuchsia);
transition: transform .18s ease, opacity .18s ease;
}
.fav-btn:hover { transform: scale(1.18); color: var(--fuchsia); }
.fav-btn:active { animation: starPop .35s ease; }
.fav-section { margin: 16px 0; }
.recent-list { list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.recent-chip { padding: 6px 13px; min-height: 44px; display: inline-flex; align-items: center; }
.toast {
position: fixed; left: 50%; bottom: 24px; z-index: 30;
transform: translateX(-50%) translateY(12px);
background: var(--navy); color: #FFFFFF; font-weight: 800;
padding: 11px 20px; border-radius: 999px;
box-shadow: 0 12px 30px rgba(18, 18, 58, .35);
opacity: 0; pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* --- Tables: horizontally scrollable under 480px --- */
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .95rem; }
@media (max-width: 767px) {
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--lav); color: var(--navy); font-weight: 800; }
/* --- FAQ, notes, footer --- */
.faq details {
border: 1px solid var(--line); border-radius: 12px;
padding: 12px 14px; margin: 10px 0; background: var(--card);
transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--violet); }
.faq summary { font-weight: 800; cursor: pointer; color: var(--navy); }
.note { background: #FEF6E0; border: 1px solid #FDE68A; border-radius: 12px; padding: 12px 14px; }
.muted { color: var(--muted); }
.site-footer {
max-width: 1024px; margin: 0 auto; padding: 24px 16px 40px;
color: var(--muted); border-top: 1px solid var(--line);
}
.site-footer nav { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.site-footer nav a { font-weight: 700; }
/* --- Keyframes: transform and opacity only --- */
@keyframes heroDrift {
from { transform: translate3d(-4%, -2%, 0) scale(1); opacity: .7; }
to { transform: translate3d(4%, 3%, 0) scale(1.12); opacity: .95; }
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes flashRing {
from { opacity: .9; transform: scale(.985); }
to { opacity: 0; transform: scale(1.04); }
}
@keyframes starPop {
0% { transform: scale(1); }
45% { transform: scale(1.45); }
100% { transform: scale(1); }
}
@keyframes shimmerSweep {
0% { opacity: 0; transform: translateX(-160%) skewX(-18deg); }
18% { opacity: 1; }
55% { opacity: 1; transform: translateX(320%) skewX(-18deg); }
56%, 100% { opacity: 0; transform: translateX(320%) skewX(-18deg); }
}
@keyframes sparkTwinkle {
0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
50% { opacity: .65; transform: scale(.82) rotate(12deg); }
}
/* --- Mobile header (v3.2): hamburger, soft animated panel ---
Below 768px the pill row is replaced by a hamburger: logo + button on
one row; tapping opens a panel that slides/fades in (transform/opacity
+ max-height, ~0.3s ease). Desktop (>=768px) keeps the pill nav.
prefers-reduced-motion (below) disables the animation. */
.nav-toggle { display: none; }
@media (max-width: 767px) {
.header-inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; }
.logo { flex: 1 1 auto; min-width: 0; font-size: 1.2rem; }
.nav-toggle {
display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
flex: 0 0 auto; width: 48px; height: 48px; min-height: 48px; padding: 0;
background: transparent; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px;
}
.nav-toggle:hover { border-color: rgba(255, 255, 255, .55); transform: none; }
.nav-toggle span {
display: block; width: 22px; height: 2.5px; border-radius: 2px; background: #FFFFFF;
transition: transform .3s ease, opacity .3s ease;
}
/* 3 lines morph to an X: top line drops + rotates, middle fades, bottom rises + rotates. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.main-nav {
flex-basis: 100%; width: 100%; max-width: 100%;
flex-direction: column; align-items: stretch; flex-wrap: nowrap;
overflow: hidden; max-height: 0; opacity: 0; visibility: hidden;
transform: translateY(-8px); padding: 0;
-webkit-mask-image: none; mask-image: none;
transition: max-height .3s ease, opacity .3s ease, transform .3s ease, visibility .3s;
}
.site-header.nav-open .main-nav {
max-height: 560px; opacity: 1; visibility: visible; transform: none;
overflow-y: auto; padding: 8px 0 12px;
}
.main-nav a { width: 100%; min-height: 44px; display: flex; align-items: center; }
.nav-sep { display: none; }
.nav-group-label { align-self: flex-start; padding: 12px 4px 2px; }
/* Hero stays compact on a phone so the converter is not pushed far down. */
.hero { padding: 18px 16px 30px; }
.hero-stats { font-size: .88rem; }
.hero-chips a, .hero-chip-current { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Very narrow phones: card tag on its own row, Copiar + PNG together below it. */
@media (max-width: 400px) {
.card-foot { flex-wrap: wrap; }
.card-foot .style-tag { flex-basis: 100%; }
.card-foot .copy-btn, .card-foot .png-btn { min-height: 44px; }
}
/* --- Desktop: two-column results grid --- */
@media (min-width: 640px) {
.results { grid-template-columns: 1fr 1fr; }
h1 { font-size: 2.05rem; }
.header-inner { padding: 12px 16px; }
.hero { padding: 26px 22px 38px; }
}
/* --- Reduced motion: everything still, content fully visible --- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.hero::before { opacity: .45; }
.style-card { opacity: 1; transform: none; }
.tabs button.active::after { opacity: 1; transform: scaleX(1); }
}
/* v3 tofu fallback: style-card output only, system fonts first, Noto webfonts fill gaps (Math Alphanumeric + Enclosed/Symbols). Does NOT travel with copied text. */
.style-output{font-family:system-ui,"Segoe UI Symbol","Apple Symbols","Noto Sans Math","Noto Sans Symbols",sans-serif;}