@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

.timiix-weeks-page {
position: relative;
width: 100%;
overflow: hidden;
color: #0B1730;
background: #F2F8F8;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.5;
box-sizing: border-box;
}
.timiix-weeks-page .timiix-weeks-shell,
.timiix-weeks-page .timiix-weeks-shell *,
.timiix-weeks-page .timiix-weeks-shell *::before,
.timiix-weeks-page .timiix-weeks-shell *::after {
box-sizing: border-box;
}
.timiix-weeks-page .timiix-weeks-shell {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.timiix-weeks-page .timiix-weeks-hero-copy {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.timiix-weeks-page .timiix-weeks-eyebrow {
margin: 0 0 12px;
color: #3154C8;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.4;
text-transform: uppercase;
}
.timiix-weeks-page .timiix-weeks-title {
margin: 0;
color: #0B1730;
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.08;
text-wrap: balance;
}
.timiix-weeks-page .timiix-weeks-subtitle {
max-width: 760px;
margin: 16px auto 0;
color: #52627A;
line-height: 1.7;
text-wrap: balance;
}
.timiix-weeks-page .timiix-weeks-tool {
width: 100%;
max-width: 1200px;
margin: 32px auto 0;
overflow: hidden;
background: #FFFFFF;
border: 1px solid #D9E2F0;
border-radius: 26px;
box-shadow: 0 20px 60px rgba(15, 35, 70, 0.08);
}
.timiix-weeks-page.timiix-weeks-enhanced .timiix-weeks-tool {
opacity: 0;
transform: translateY(18px);
transition: opacity 600ms ease, transform 600ms ease;
}
.timiix-weeks-page.timiix-weeks-enhanced .timiix-weeks-tool.timiix-weeks-is-visible {
opacity: 1;
transform: translateY(0);
}
.timiix-weeks-page .timiix-weeks-tool-head {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 0;
border-bottom: 1px solid #D9E2F0;
}
.timiix-weeks-page .timiix-weeks-tool-label {
margin: 0;
color: #0B1730;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.11em;
line-height: 1.4;
text-transform: uppercase;
}
.timiix-weeks-page .timiix-weeks-status-badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
min-height: 32px;
padding: 6px 12px;
color: #3154C8;
background: #F7F9FC;
border: 1px solid #D9E2F0;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
}
.timiix-weeks-page .timiix-weeks-status-badge::before {
width: 7px;
height: 7px;
margin-right: 8px;
background: #3154C8;
border-radius: 50%;
content: "";
}
.timiix-weeks-page .timiix-weeks-status-badge[data-state="calculated"],
.timiix-weeks-page .timiix-weeks-status-badge[data-state="today"],
.timiix-weeks-page .timiix-weeks-status-badge[data-state="passed"] {
color: #087A45;
}
.timiix-weeks-page .timiix-weeks-status-badge[data-state="calculated"]::before,
.timiix-weeks-page .timiix-weeks-status-badge[data-state="today"]::before,
.timiix-weeks-page .timiix-weeks-status-badge[data-state="passed"]::before {
background: #087A45;
}
.timiix-weeks-page .timiix-weeks-workspace {
display: grid;
align-items: stretch;
}
.timiix-weeks-page .timiix-weeks-controls-panel,
.timiix-weeks-page .timiix-weeks-result-panel {
min-width: 0;
}
.timiix-weeks-page .timiix-weeks-controls-panel {
display: flex;
flex-direction: column;
}
.timiix-weeks-page .timiix-weeks-field-label {
display: inline-block;
margin: 0 0 8px;
color: #0B1730;
font-size: 15px;
font-weight: 750;
}
.timiix-weeks-page .timiix-weeks-date-input {
display: block;
width: 100%;
min-width: 0;
min-height: 52px;
padding: 12px 14px;
color: #0B1730;
background: #FFFFFF;
border: 1px solid #D9E2F0;
border-radius: 12px;
font: inherit;
font-size: 16px;
line-height: 1.3;
color-scheme: light;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.timiix-weeks-page .timiix-weeks-date-input:hover {
border-color: #3154C8;
}
.timiix-weeks-page .timiix-weeks-date-input:focus-visible {
border-color: #3154C8;
outline: 3px solid rgba(49, 84, 200, 0.18);
outline-offset: 2px;
box-shadow: 0 0 0 1px #3154C8;
}
.timiix-weeks-page .timiix-weeks-date-input[aria-invalid="true"] {
border-color: #3154C8;
box-shadow: 0 0 0 3px rgba(49, 84, 200, 0.12);
}
.timiix-weeks-page .timiix-weeks-helper {
margin: 8px 0 0;
color: #52627A;
font-size: 13px;
line-height: 1.55;
}
.timiix-weeks-page .timiix-weeks-validation {
min-height: 20px;
margin: 6px 0 0;
color: #2445B0;
font-size: 13px;
font-weight: 700;
line-height: 1.45;
}
.timiix-weeks-page .timiix-weeks-context {
margin: 12px 0 0;
padding: 10px 12px;
overflow-wrap: anywhere;
color: #52627A;
background: #F7F9FC;
border-radius: 10px;
font-size: 13px;
line-height: 1.45;
}
.timiix-weeks-page .timiix-weeks-preset-title {
margin: 24px 0 10px;
color: #0B1730;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.timiix-weeks-page .timiix-weeks-presets {
display: grid;
min-width: 0;
}
.timiix-weeks-page .timiix-weeks-preset {
min-width: 0;
min-height: 44px;
padding: 9px 8px;
color: #52627A;
background: #FFFFFF;
border: 1px solid #D9E2F0;
border-radius: 10px;
font: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.timiix-weeks-page .timiix-weeks-preset:hover {
color: #3154C8;
border-color: #3154C8;
}
.timiix-weeks-page .timiix-weeks-preset[aria-pressed="true"] {
color: #FFFFFF;
background: #3154C8;
border-color: #3154C8;
}
.timiix-weeks-page .timiix-weeks-preset:focus-visible,
.timiix-weeks-page .timiix-weeks-action:focus-visible {
outline: 3px solid rgba(49, 84, 200, 0.22);
outline-offset: 2px;
}
.timiix-weeks-page .timiix-weeks-result-panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
background: #F7F9FC;
border: 1px solid #D9E2F0;
border-radius: 20px;
}
.timiix-weeks-page .timiix-weeks-result-label {
margin: 0 0 16px;
color: #3154C8;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.4;
text-transform: uppercase;
}
.timiix-weeks-page .timiix-weeks-result-region {
width: 100%;
min-width: 0;
}
.timiix-weeks-page .timiix-weeks-result-primary {
margin: 0;
overflow-wrap: anywhere;
color: #0B1730;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.02;
}
.timiix-weeks-page .timiix-weeks-result-secondary {
margin: 20px 0 0;
color: #0B1730;
font-size: 18px;
font-weight: 750;
line-height: 1.4;
}
.timiix-weeks-page .timiix-weeks-result-target {
margin: 6px 0 0;
overflow-wrap: anywhere;
color: #52627A;
font-size: 15px;
line-height: 1.5;
}
.timiix-weeks-page .timiix-weeks-actions {
display: grid;
min-width: 0;
}
.timiix-weeks-page .timiix-weeks-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 50px;
padding: 12px 18px;
border: 1px solid transparent;
border-radius: 12px;
font: inherit;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.035em;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.timiix-weeks-page .timiix-weeks-action-primary {
color: #FFFFFF;
background: #3154C8;
border-color: #3154C8;
box-shadow: 0 8px 20px rgba(49, 84, 200, 0.22);
}
.timiix-weeks-page .timiix-weeks-action-primary:hover {
background: #2445B0;
border-color: #2445B0;
}
.timiix-weeks-page .timiix-weeks-action-outline {
color: #3154C8;
background: #FFFFFF;
border-color: #D9E2F0;
}
.timiix-weeks-page .timiix-weeks-action-outline:hover {
color: #2445B0;
border-color: #3154C8;
}
.timiix-weeks-page .timiix-weeks-action-quiet {
color: #52627A;
background: #F7F9FC;
border-color: #F7F9FC;
}
.timiix-weeks-page .timiix-weeks-action-quiet:hover {
color: #0B1730;
border-color: #D9E2F0;
}
.timiix-weeks-page .timiix-weeks-action:active,
.timiix-weeks-page .timiix-weeks-preset:active {
transform: translateY(1px);
}
.timiix-weeks-page .timiix-weeks-action:disabled {
opacity: 0.56;
cursor: not-allowed;
box-shadow: none;
}
.timiix-weeks-page .timiix-weeks-copy-feedback {
min-height: 20px;
margin: 8px 0 0;
color: #087A45;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.timiix-weeks-page .timiix-weeks-info-grid {
display: grid;
min-width: 0;
border-top: 1px solid #D9E2F0;
}
.timiix-weeks-page .timiix-weeks-info-card {
min-width: 0;
padding: 18px;
overflow: hidden;
background: #F7F9FC;
border: 1px solid #D9E2F0;
border-radius: 16px;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.timiix-weeks-page .timiix-weeks-info-label {
margin: 0 0 7px;
color: #52627A;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1.3;
text-transform: uppercase;
}
.timiix-weeks-page .timiix-weeks-info-value {
margin: 0;
overflow-wrap: anywhere;
color: #0B1730;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.3;
}
.timiix-weeks-page .timiix-weeks-tool-status {
display: flex;
align-items: flex-start;
min-width: 0;
color: #3154C8;
font-size: 13px;
font-weight: 700;
line-height: 1.5;
}
.timiix-weeks-page .timiix-weeks-tool-status::before {
flex: 0 0 auto;
width: 8px;
height: 8px;
margin: 6px 10px 0 0;
background: #3154C8;
border-radius: 50%;
content: "";
}
.timiix-weeks-page .timiix-weeks-tool-status[data-tone="success"] {
color: #087A45;
}
.timiix-weeks-page .timiix-weeks-tool-status[data-tone="success"]::before {
background: #087A45;
}
@media (hover: hover) and (pointer: fine) {
.timiix-weeks-page .timiix-weeks-action:hover,
.timiix-weeks-page .timiix-weeks-preset:hover {
transform: translateY(-1px);
}
.timiix-weeks-page .timiix-weeks-info-card:hover {
border-color: rgba(49, 84, 200, 0.35);
box-shadow: 0 8px 22px rgba(15, 35, 70, 0.06);
transform: translateY(-2px);
}
}
@media (min-width: 320px) and (max-width: 374px) {
.timiix-weeks-page {
padding: 48px 12px;
}
.timiix-weeks-page .timiix-weeks-shell {
padding: 0;
}
.timiix-weeks-page .timiix-weeks-title {
font-size: 30px;
}
.timiix-weeks-page .timiix-weeks-subtitle {
font-size: 14px;
}
.timiix-weeks-page .timiix-weeks-tool {
margin-top: 24px;
padding: 20px 14px;
border-radius: 20px;
}
.timiix-weeks-page .timiix-weeks-tool-head {
align-items: flex-start;
gap: 12px;
padding-bottom: 18px;
}
.timiix-weeks-page .timiix-weeks-status-badge {
padding: 6px 9px;
font-size: 9px;
}
.timiix-weeks-page .timiix-weeks-workspace {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
padding: 20px 0;
}
.timiix-weeks-page .timiix-weeks-date-input {
min-height: 50px;
}
.timiix-weeks-page .timiix-weeks-presets {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.timiix-weeks-page .timiix-weeks-result-panel {
min-height: 270px;
padding: 28px 14px;
}
.timiix-weeks-page .timiix-weeks-result-primary {
font-size: 40px;
}
.timiix-weeks-page .timiix-weeks-actions {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.timiix-weeks-page .timiix-weeks-info-grid {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin-top: 24px;
padding-top: 24px;
}
.timiix-weeks-page .timiix-weeks-tool-status {
margin-top: 20px;
}
}
@media (min-width: 375px) and (max-width: 429px) {
.timiix-weeks-page {
padding: 56px 16px;
}
.timiix-weeks-page .timiix-weeks-shell {
padding: 0;
}
.timiix-weeks-page .timiix-weeks-title {
font-size: 34px;
}
.timiix-weeks-page .timiix-weeks-subtitle {
font-size: 15px;
}
.timiix-weeks-page .timiix-weeks-tool {
margin-top: 28px;
padding: 22px 18px;
border-radius: 22px;
}
.timiix-weeks-page .timiix-weeks-tool-head {
gap: 12px;
padding-bottom: 20px;
}
.timiix-weeks-page .timiix-weeks-workspace {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
padding: 22px 0;
}
.timiix-weeks-page .timiix-weeks-date-input {
min-height: 52px;
}
.timiix-weeks-page .timiix-weeks-presets {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.timiix-weeks-page .timiix-weeks-result-panel {
min-height: 290px;
padding: 32px 18px;
}
.timiix-weeks-page .timiix-weeks-result-primary {
font-size: 46px;
}
.timiix-weeks-page .timiix-weeks-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.timiix-weeks-page .timiix-weeks-info-grid {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin-top: 24px;
padding-top: 24px;
}
.timiix-weeks-page .timiix-weeks-tool-status {
margin-top: 20px;
}
}
@media (min-width: 430px) and (max-width: 767px) {
.timiix-weeks-page {
padding: 64px 20px;
}
.timiix-weeks-page .timiix-weeks-shell {
padding: 0;
}
.timiix-weeks-page .timiix-weeks-title {
font-size: 38px;
}
.timiix-weeks-page .timiix-weeks-subtitle {
font-size: 16px;
}
.timiix-weeks-page .timiix-weeks-tool {
margin-top: 28px;
padding: 26px 22px;
}
.timiix-weeks-page .timiix-weeks-tool-head {
gap: 16px;
padding-bottom: 22px;
}
.timiix-weeks-page .timiix-weeks-workspace {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
padding: 24px 0;
}
.timiix-weeks-page .timiix-weeks-date-input {
min-height: 52px;
}
.timiix-weeks-page .timiix-weeks-presets {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.timiix-weeks-page .timiix-weeks-result-panel {
min-height: 300px;
padding: 36px 22px;
}
.timiix-weeks-page .timiix-weeks-result-primary {
font-size: clamp(46px, 11vw, 54px);
}
.timiix-weeks-page .timiix-weeks-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.timiix-weeks-page .timiix-weeks-info-grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin-top: 28px;
padding-top: 28px;
}
.timiix-weeks-page .timiix-weeks-tool-status {
margin-top: 22px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.timiix-weeks-page {
padding: 72px 32px;
}
.timiix-weeks-page .timiix-weeks-shell {
padding: 0;
}
.timiix-weeks-page .timiix-weeks-title {
font-size: 42px;
}
.timiix-weeks-page .timiix-weeks-subtitle {
font-size: 17px;
}
.timiix-weeks-page .timiix-weeks-tool {
margin-top: 32px;
padding: 32px;
}
.timiix-weeks-page .timiix-weeks-tool-head {
gap: 20px;
padding-bottom: 24px;
}
.timiix-weeks-page .timiix-weeks-workspace {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 24px;
padding: 28px 0;
}
.timiix-weeks-page .timiix-weeks-date-input {
min-height: 54px;
}
.timiix-weeks-page .timiix-weeks-presets {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.timiix-weeks-page .timiix-weeks-result-panel {
min-height: 360px;
padding: 36px 24px;
}
.timiix-weeks-page .timiix-weeks-result-primary {
font-size: clamp(54px, 6.5vw, 62px);
}
.timiix-weeks-page .timiix-weeks-actions {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.timiix-weeks-page .timiix-weeks-info-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 30px;
padding-top: 30px;
}
.timiix-weeks-page .timiix-weeks-tool-status {
margin-top: 24px;
}
}
@media (min-width: 1024px) {
.timiix-weeks-page {
padding: 80px 40px;
}
.timiix-weeks-page .timiix-weeks-shell {
padding: 0;
}
.timiix-weeks-page .timiix-weeks-title {
font-size: 48px;
}
.timiix-weeks-page .timiix-weeks-subtitle {
font-size: 18px;
}
.timiix-weeks-page .timiix-weeks-tool {
margin-top: 32px;
padding: 40px;
}
.timiix-weeks-page .timiix-weeks-tool-head {
gap: 24px;
padding-bottom: 28px;
}
.timiix-weeks-page .timiix-weeks-workspace {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 32px;
padding: 32px 0;
}
.timiix-weeks-page .timiix-weeks-date-input {
min-height: 54px;
}
.timiix-weeks-page .timiix-weeks-presets {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.timiix-weeks-page .timiix-weeks-result-panel {
min-height: 390px;
padding: 48px 32px;
}
.timiix-weeks-page .timiix-weeks-result-primary {
font-size: clamp(64px, 5.4vw, 76px);
}
.timiix-weeks-page .timiix-weeks-actions {
grid-template-columns: 1.25fr 1fr 0.8fr 0.8fr;
gap: 12px;
}
.timiix-weeks-page .timiix-weeks-info-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 32px;
padding-top: 32px;
}
.timiix-weeks-page .timiix-weeks-tool-status {
margin-top: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.timiix-weeks-page.timiix-weeks-enhanced .timiix-weeks-tool,
.timiix-weeks-page .timiix-weeks-action,
.timiix-weeks-page .timiix-weeks-preset,
.timiix-weeks-page .timiix-weeks-date-input,
.timiix-weeks-page .timiix-weeks-info-card {
opacity: 1;
transform: none;
transition: none;
}
}